CSS doesn't apply to the tag, write() method contains inside a function

Question

Let's Say I wrote a function that writes some text inside two different HTML tags and writes on to the page, onClick of a button. The problem is that the CSS styles are not getting applied to those tags...But when I put the relevant code outside the function it works fine.

My JS code ,

let i;
function myFunction() {
            for (i=0; i<10; i++){
                if (i % 2 == 0) {
                    write_this = "<green>This</green>"
                }
                else {
                    write_this ="<red>That</red>"
                }
                document.write(write_this)
            }

}

CSS code

green {
    color: green;
}

red {
    color: red;
}

HTML

<input type="button" onclick="myFunction()" value="My Button">

onClick of the button, hopefully it does the job right...but those CSS colors are not getting applied to the relevant text

1. Why it doesn't work?
2. How to achieve what I want?

Answer 1

You should use innerHTML instead write to avoid erasing the whole document first.

about write()

https://developer.mozilla.org/en-US/docs/Web/API/Document/write

Note: as document.write writes to the document stream, calling document.write on a closed (loaded) document automatically calls document.open , which will clear the document .

about innerHTML

https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML

The Element property innerHTML gets or sets the HTML or XML markup contained within the element.

What you might try to do is more like:

 let i; function myFunction() { var write_this = "";// prepare your var to update on the loop for (i = 0; i < 10; i++) { if (i % 2 == 0) { write_this = write_this + "<green>This</green>" } else { write_this = write_this + "<red>That</red>" } // you may use a container document.getElementById("mybox").innerHTML = write_this; } }

 green { color: green; } red { color: red; }

 <input type="button" onclick="myFunction()" value="My Button"> <p id="mybox"></p>

Answer 2

When your function do document.write(write_this) -> it is actually replace the current document with new content

so your previous html including your styles are deleted from the document...

change to:

function myFunction() {
      for (i = 0; i < 10; i++) {
        if (i % 2 == 0) {
          write_this = "<green>This</green>"
        }
        else {
          write_this = "<red>That</red>"
        }
        document.body.innerHTML = write_this; // <------------
      }

Answer 3

Use += to append to the existing document, if you just use = , the last result will overwrite the whole page.

function myFunction() {
    for (i=0; i<10; i++){
        if (i % 2 == 0) {
          write_this = "<green class='green'>This</green>"
        }
        else {
          write_this ="<red class='red'>That</red>"
        }
        document.body.innerHTML += write_this;
    }
}