Toggle text with JavaScript

Question

I am learning JavaScript. I am trying toggle the text on a page using the replaceChild() method. I came up with the code below. I don't understand why it will not work. Pls help.

<html>
<head>

<script>
    function toggleText() {
        var be= document.getElementById("main");
        var b4= be.getElementsByTagName("h1");
        var l8 = document.createElement("h1").innerHTML="After";
        var l88 = document.createElement("h1").innerHTML="Before";
        if (b4[0].innerHTML=="Before"){ 
            be.replaceChild(l8,b4[0]) 
        }
        if (b4[0].innerHTML=="After") {
            be.replaceChild(l88,b4[0]);
        }
    }
</script>

</head>
<body>
    <div id="main" onclick="toggleText()">
        <h1>Before</h1>
    </div>
</body>
</html>

Side note. Typo, missing ) in if (b4[0].innerHTML=="After" { — j08691
– j08691, Commented Jan 22, 2014 at 15:21

Boris Šuška · Accepted Answer · 2014-01-22 15:38:18Z

1

As CBrone wrote, you have to create h1 instance first, store it to variable and then call innerHML on the variable.

Another problem is if structure. First you replace the element and then test the same element for another condition and do another operation. In this case is better to use if ... else if ... statement instead of if ... if ..., which is the root of your problem.

Here is working toggleText function

function toggleText() {
    var be= document.getElementById("main");
    var b4= be.getElementsByTagName("h1");
    var l8 = document.createElement("h1");
    l8.innerHTML="After";
    var l88 = document.createElement("h1");
    l88.innerHTML="Before";
    if (b4[0].innerHTML == "Before")
    {
        be.replaceChild(l8, b4[0]);
    }
    else if (b4[0].innerHTML=="After")
    {
        be.replaceChild(l88, b4[0]);
    }
}

Here is working fiddle

answered Jan 22, 2014 at 15:38

Boris Šuška

1,8041 gold badge21 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

lmission Over a year ago

Thank you very much, you and CBroe were very helpful. I would have accepted CBroe's answer. But something visual goes a long way for beginners like me.

C3roe · Accepted Answer · 2014-01-22 15:29:46Z

In addition to what’s been said in comments already:

var l8 = document.createElement("h1").innerHTML="After";
var l88 = document.createElement("h1").innerHTML="Before";

After this your variables do not contain references to the created elements, but the string values that you assigned to their innterHTML. (The result of an assignment operation is the assigned value.) And trying to pass text values instead of element references to replaceChild afterwards must fail for that reason.

Do this in two steps – create the elements first and save their reference into the variables – and then manipulate their innerHTML afterwards.

var l8 = document.createElement("h1");
l8.innerHTML="After";
var l88 = document.createElement("h1");
var l88 = .innerHTML="Before";

(And maybe use better suited variable names, because if you keep your current “naming scene” up you’ll get confused sooner or later.)

Omri Aharon · Accepted Answer · 2014-01-22 15:36:27Z

1

May I suggest the following, for better readability:

<html>
<head>

<script>
    function toggleText() {
         var be= document.getElementById("main");
         var b4= be.getElementsByTagName("h1")[0];

         if (b4.innerHTML=="Before") { 
             b4.innerHTML = "After";
         }
         else if (b4.innerHTML=="After") {
             b4.innerHTML = "Before";
         }
    }
</script>

</head>
<body>
    <div id="main" onclick="toggleText()">
        <h1>Before</h1>
    </div>
</body>
</html>

answered Jan 22, 2014 at 15:36

Omri Aharon

17.1k5 gold badges43 silver badges61 bronze badges

Collectives™ on Stack Overflow

Toggle text with JavaScript

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related