Using a CSS Stylesheet with Javascript .innerHTML

Question

If I have a javascript function that loads an error using

document.getElementById("ID").innerHTML = "This is your error";

And I want to stylize it say change the text to a different color, and put the error into a different position, how would I go about doing that? I've been looking around, and cannot find any information.

Thanks, but I was told specifically to use CSS is there a way to do that? — Jack Parker, Feb 11 '15 at 15:37
possible duplicate of [Change an element's CSS class with JavaScript](http://stackoverflow.com/questions/195951/change-an-elements-css-class-with-javascript) — Fabio Antunes, Feb 11 '15 at 15:37

score 8 · Accepted Answer · answered Feb 11 '15 at 15:43

8

As innerHTML suggests you can also add HTML. You could for instance add a span tag with a class that you style via CSS.

JS/CSS and HTML

document.getElementById('error-message').innerHTML = "<span class='error'>my error</span>";

.error {
  color: red;
  font-size: 24px;
}

<div id="error-message"></div>

answered Feb 11 '15 at 15:43

Dieterg

16,118
3
30
49

That is precisely what I am looking for thank you. One final question that relates, since I have a number of errors on my form, for example name.error, job. error and so on, is there a catch all I can use so that they would all fit under one css tag? – Jack Parker Feb 11 '15 at 15:48

score 1 · Answer 2 · edited May 23 '17 at 12:02

1

Check this out , this answer should suffice to your needs:

document.getElementById("ID").innerHTML = "This is your error";
var sheet = document.createElement('style')
sheet.innerHTML = "div {color:red;overflow:hidden;}";
document.body.appendChild(sheet);

Add the below line to your span

#myspan{float:left;}

Working fiddle:http://jsfiddle.net/0z971bsn/

As you mentioned in the comments , to check for errors you can refer to the answer to this question How to get my forms' Javascript error function to cancel form submission and insert error message?

edited May 23 '17 at 12:02

Community

1
1

answered Feb 11 '15 at 15:47

m0bi5

8,900
7
33
44

OK, one quick question if I may. What I have is in a span, at present it is underneath the field it is in reference too. If I wanted the error to appear in line next to the field what would I do? I've tried floating it, but that just keeps it underneath, but to the right. – Jack Parker Feb 11 '15 at 20:37
1

@JackParker ok , I edited my answer , check it out and let me know – m0bi5 Feb 12 '15 at 03:13

Using a CSS Stylesheet with Javascript .innerHTML

2 Answers2

Linked