div to change color per line through javascript

Question

I want to populate my div with exceptions and success messages.

So, every exception should be in red text and every success must be in blue text.

I've done

if(FileName1.length == 0 && FileName2.length == 0 && FileName3.length == 0 && FileName4.length == 0)
{
    var err1 = document.getElementById("box");
    err1.innerHTML = err1.innerHTML + "<br>" + "No files have been selected to upload";
    err1.style.color = "Red";
}
else if(FileName1 == FileName3 || FileName1 == FileName4 || FileName2 == FileName3 || FileName2 == FileName4)
{
    var err1 = document.getElementById("box");
    err1.innerHTML = err1.innerHTML + "<br>" + "Configuration file and Geco script should not be the same as left or right files. Please check your uploads";
    err1.style.color = "Red";
}
//else if(FileName1.value)
else
{
    var scc1 = document.getElementById("box");
    scc1.innerHTML = scc1.innerHTML + "<br>" +  "Uploading files, the page might refresh";
    scc1.style.color = "Blue";
    document.myform.submit();   
}

But wen the success message appears off of the red messages are also changed to blue, how do I deal with this? How do I give blue to success and red to exceptions in the same div?

PS : I've used the below method to preserve previous div data

scc1.innerHTML + "<br>" +

score 2 · Accepted Answer · answered Mar 13 '14 at 09:37

you can use span to append a text below the another and give css to that span like this

if(FileName1.length == 0 && FileName2.length == 0 && FileName3.length == 0 && FileName4.length == 0)
{
    var err1 = document.getElementById("box");
    err1.innerHTML = err1.innerHTML + "<br>" + "<span class='red'>No files have been selected to upload</span>";
}
else if(FileName1 == FileName3 || FileName1 == FileName4 || FileName2 == FileName3 || FileName2 == FileName4)
{
    var err1 = document.getElementById("box");
    err1.innerHTML = err1.innerHTML + "<br>" + "<span class='red'>Configuration file and Geco script should not be the same as left or right files. Please check your uploads</span>";
}
//else if(FileName1.value)
else
{
    var scc1 = document.getElementById("box");
    scc1.innerHTML = scc1.innerHTML + "<br>" +  "<span class='blue'>Uploading files, the page might refresh</span>";
    document.myform.submit();   
}

and CSS is like :

.red{
   color:red;
}
.blue{
   color:blue;
}

Raul Guiu · Answer 2 · 2014-03-13T09:45:52.717

1

I think a list, (UL) would be better as a container than appending inside a DIV with each text followed by a BR. You could use a class, 'exception'/'success', so every time that you add a new LI element you could add the class 'exception' or 'success'. Then in the css define 'exception' and 'success' with the right colours.

Example:

var mylist= document.getElementById("box_list");
var li=document.createElement('li');

mylist.appendChild(li);
li.innerHTML='myerror message';
li.addClass('theclass_either_error_or_success')

And in the css you define the classes

edited Mar 13 '14 at 09:45

answered Mar 13 '14 at 09:32

Raul Guiu

2,374
22
37

I'm sorry I didn't get you. – Mar 13 '14 at 09:33
+1 You can't select "lines" of text with css, putting each line in an element with a classname is a good idea. – xec Mar 13 '14 at 09:35
http://stackoverflow.com/questions/11351135/create-ul-and-li-elements-in-javascript – Raul Guiu Mar 13 '14 at 09:42

div to change color per line through javascript

2 Answers2