CODEWITHSUNDEEP
javascripthtmlcss
nanjero05
nanjero05

Reputation: 111

CSS - How can I set the color of strings written using "innerHTML" into a div

I currently have a function that outputs an array of strings into an html page. How can I set the color of the output text? This is the code that writes into a page: 

function showErrors() {
    if (errList.length >= 1)
    document.getElementById("errorsSpace").innerHTML = errList.join('<br/>');
}

Ive tried using "color: red" with no luck. I get an error that says "Cannot set property 'innerHTML' of null"

here is a jsfiddle for the rest of the code: https://jsfiddle.net/wd6fpgm6/

Upvotes: 0

Views: 54

Answers (3)

gavgrif
gavgrif

Reputation: 15489

try the following - convert the array to a string containing both the html and the error class which is styled in the CSS - then the entire string is inserted into the hhtml and has correct structure and styling:

//CSS
.error{color:red}

//js
function showErrors() {
    var errors ="";
    if (errList.length >= 1)
      {
        for(i=0;i<errList.length;i++){
         errors+="<p class='error'>" + errList[i] + "</p>;";
          }
        document.getElementById("errorsSpace").innerHTML = errors;
      }
}

//result will be 

<div id='errorsSpace'>
    <p class='error'>Error 1</p>;
    <p class='error'>Error 2</p>;
    <p class='error'>Error 3</p>;
</div>

you could even leave out the class="error" on the p and have the css be :

#errorsSpace p{color:red}

Upvotes: 1

Oleg
Oleg

Reputation: 682

did you try these methods?

document.getElementById("errorsSpace").setAttribute("style", "color:red");

or

document.getElementById("errorsSpace").style.color = "red";

Upvotes: 0

Chrez
Chrez

Reputation: 133

Instead of placing an
tag after every error, you can place every error in a paragraph tag and just set the color of the tag.

Upvotes: 0

Related Questions