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>
Hi, I didnt see your flen variable value?
document.getElementById("demo1").innerHTML = text;
This code just will change demo1 innerHtml This is not remove demo1 div element.
You can try document.getElementsByClassName("container3")[0].innerHtml = text;
document.getElementsByClassName("container3")[1].innerHtml = text;
var arr = document.getElementsByClassName("") This code will return array. So, you can try arr[0] for firt item select.
TheSheriff
Co-Founder, Founder, Entrepreneur & Problem Solver
As a general improvement I'd use ``` tilde, like so:
text = `<div class="palette" title="original" style="background-color: ${colours[i]}" > ${i} </div>;`What you're actually doing is resetting
textevery loop. So you only ever get the last item in the array;i=10 and colour = #007FFF, what you need to do is either loop through and.appendChild(node)ORtext += <div></div>so that you have a long string that you then do.innerHTML = textwith.I suggest the first way, attaching
divsas a string is not a good practise.