My FeedDiscussionsHeadless CMS
New
Sign in
Log inSign up
Learn more about Hashnode Headless CMSHashnode Headless CMS
Collaborate seamlessly with Hashnode Headless CMS for Enterprise.
Upgrade ✨Learn more

JavaScript refuses to toggle one div inside another div

Gustavo Benedito Costa's photo
Gustavo Benedito Costa
·Feb 7, 2019

Hello!

I tried to use div, p, span, etc., but it did not work, because two divs have conflicts with each other. For example:

    <h1>Original</h1>

    <div class="container3">
       <div id="demo1"></div>
    </div>

    <h1>Telinkrin</h1>

    <div class="container3 telinkrin">
      <div id="demo2"></div>
    </div>

<script>
      var colours, text, fLen, i;
      colours = ["#000", "#000009", "#0064A2", "#006575", "#0071F3", "#007341", "#007946", "#007AF9", "#007DE8", "#007EFC", "#007FFF"];

      for (i = 0; i < fLen; i++) 
      {
        text = "<div class=\"palette\" title=\"original\" style=\"background-color:" + colours[i] + ">" +  i + "</div>\n";
      }

      document.getElementById("demo1").innerHTML = text;
      document.getElementById("demo2").innerHTML = text;
</script>

I expect like:

<div class="container3">
        <div class="palette" title="original" style="background-color: #000">0</div>
        <div class="palette" title="original" style="background-color: #000009">1</div>
        <div class="palette" title="original" style="background-color: #0064A2">2</div>
        <div class="palette" title="original" style="background-color: #006575">3</div>
        <div class="palette" title="original" style="background-color: #0071F3">4</div>
        <div class="palette" title="original" style="background-color: #007341">5</div>
        <div class="palette" title="original" style="background-color: #007946">6</div>
        <div class="palette" title="original" style="background-color: #007AF9">7</div>
        <div class="palette" title="original" style="background-color: #007DE8">8</div>
        <div class="palette" title="original" style="background-color: #007EFC">9</div>
        <div class="palette" title="original" style="background-color: #007FFF">10</div>
</div>

<div class="container3 telinkrin">
        <div class="palette" title="original" style="background-color: #000">0</div>
        <div class="palette" title="original" style="background-color: #000009">1</div>
        <div class="palette" title="original" style="background-color: #0064A2">2</div>
        <div class="palette" title="original" style="background-color: #006575">3</div>
        <div class="palette" title="original" style="background-color: #0071F3">4</div>
        <div class="palette" title="original" style="background-color: #007341">5</div>
        <div class="palette" title="original" style="background-color: #007946">6</div>
        <div class="palette" title="original" style="background-color: #007AF9">7</div>
        <div class="palette" title="original" style="background-color: #007DE8">8</div>
        <div class="palette" title="original" style="background-color: #007EFC">9</div>
        <div class="palette" title="original" style="background-color: #007FFF">10</div>
</div>
24