style css in javascript doesn't work

Question

I'm trying to create something like a little editor in javascript, but I don't understand why the .style doesn't work..

Thanks in advance for the help!

This is my code:

<html>
<head>
    <title>Hello World!</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
</head>
<body>
    <div>
        <textarea cols="30" rows="1" id="title1">write here the header</textarea><br /><br />
        <textarea cols="30" rows="1" id="desc1">write here the paragraph</textarea>
        <input type="button" value="show" onclick="doit()">
    </div>
<script type="text/javascript">
    function doit() {
        var title = document.getElementById("title1").value;
        var desc = document.getElementById("desc1").value;
        document.write("<h1>"+title+"</h1>").style.color="blue";
        document.write(desc);
    }
</script>
</body>
 </html>

document.write is not a good idea use append instead

Ani
– Ani

2014-05-07 18:42:28 +00:00
Commented May 7, 2014 at 18:42 — Ani
– Ani, Commented May 7, 2014 at 18:42
document.write does not return a DOM element.

John Hartsock
– John Hartsock

2014-05-07 18:43:33 +00:00
Commented May 7, 2014 at 18:43 — John Hartsock
– John Hartsock, Commented May 7, 2014 at 18:43

Oriol · Accepted Answer · 2014-05-07 18:47:35Z

Don't use document.write, see the warning from the spec:

Warning! This method has very idiosyncratic behavior. In some cases, this method can affect the state of the HTML parser while the parser is running, resulting in a DOM that does not correspond to the source of the document (e.g. if the string written is the string "<plaintext>" or "<!--"). In other cases, the call can clear the current page first, as if document.open() had been called. In yet more cases, the method is simply ignored, or throws an exception. To make matters worse, the exact behavior of this method can in some cases be dependent on network latency, which can lead to failures that are very hard to debug. For all these reasons, use of this method is strongly discouraged.

Use DOM methods instead:

function doit() {
    var title = document.getElementById("title1").value,
        desc = document.getElementById("desc1").value,
        h1 = document.createElement('h1');
    h1.appendChild(document.createTextNode(title));
    h1.style.color="blue";
    document.body.appendChild(h1);
    document.body.appendChild(document.createTextNode(desc));
}

Rashmin Javiya · Accepted Answer · 2014-05-07 18:43:15Z

1

Try this,

document.write("<h1 style='color:blue'>"+title+"</h1>");

answered May 7, 2014 at 18:43

Rashmin Javiya

5,2223 gold badges31 silver badges49 bronze badges

1 Comment

nhaarman Over a year ago

Please elaborate on why you think this answer might solve the problem, instead of just dropping some code.

tgogos · Accepted Answer · 2014-05-07 19:00:37Z

1

jsfiddle

<div id="container">
<textarea cols="30" rows="1" id="title1">write here the header</textarea><br /><br />
<textarea cols="30" rows="1" id="desc1">write here the paragraph</textarea>
<input type="button" value="show" onclick="doit();" />
<h1 id="header" style="color:blue;"></h1>
<p id="par"></p>
</div>

function doit() {
var title = document.getElementById("title1").value;
var desc = document.getElementById("desc1").value;
document.getElementById('header').innerHTML=title;
document.getElementById('par').innerHTML=desc;
}

answered May 7, 2014 at 19:00

tgogos

25.6k20 gold badges104 silver badges133 bronze badges

Comments

John Hartsock · Accepted Answer · 2014-05-07 18:47:51Z

0

<script type="text/javascript">
  function doit() {
    var title = document.getElementById("title1").value;
    var desc = document.getElementById("desc1").value;

    var newheader = document.createElement("h1");
    newheader.innerHTML = "title";
    newheader.style.color = "blue";
    document.body.appendChild(newheader);

    var newspan = document.createElement("span");
    newspan.innerHTML = desc;
    document.body.appendChild(newspan);

  }
</script>

answered May 7, 2014 at 18:47

John Hartsock

87.1k23 gold badges135 silver badges146 bronze badges

Collectives™ on Stack Overflow

style css in javascript doesn't work

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related