Search code examples
javascripthtmlqueryselectall

I Read using QuerySelectall.. how to write in innerhtml of these read tags?


I have degrees in Celsius switched them to Fahrenheit and cannot write them back to page.. picked them up with this statement

temp = document.querySelectorAll(".mylist span");
        x=[]
        for (let i = 0; i < temp.length; i++) {
            temp[i].style.backgroundColor = "red";
            x[i] = Number(temp[i].innerHTML);

Cannot write them back same way... Does not work


Solution

  • You need to set the innerHTML/textContent of the element with the new value.

    const spans = document.querySelectorAll('#mylist span');
    
    function CToF(v) {
      return v * 9/5 + 32;
    }
    
    setTimeout(() => {
      spans.forEach(span => {
        const { textContent } = span;
        span.classList.add('red');
        span.textContent = CToF(textContent);
      });
    }, 2000);
    .red { color: red; }
    <div id="mylist">
      <span>10</span>
      <span>40</span>
      <span>90</span>
    </div>