CODEWITHSUNDEEP
javascript
Guy Solell
Guy Solell

Reputation: 5

style css in javascript doesn't work

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>

Upvotes: 0

Views: 133

Answers (4)

tgogos
tgogos

Reputation: 25152

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;
}

Upvotes: 1

John Hartsock
John Hartsock

Reputation: 86882

<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>

Upvotes: 0

Oriol
Oriol

Reputation: 288120

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));
}

Upvotes: 2

Rashmin Javiya
Rashmin Javiya

Reputation: 5222

Try this,

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

Upvotes: 1

Related Questions