JS Change text onClick then change back onClick If...else

Question

Here's an easy one.

I'm creating a link with content that changes onClick. Onload it should say ""Click here for more information!" when clicked, it should say "Click here for less information!" then on re-click "...more information".

I'm sure that I'm just making a tiny mistake somewhere, help?

JavaScript

<script>
function change_text()
{
if(document.getElementById("toggle_button").innerHTML="Click here for more   
information!"){
document.getElementById("toggle_button").innerHTML="Click here for less
information!";
}else{
    document.getElementById("toggle_button").innerHTML="Click here for more     
information!";
}}
</script>

Here's the HTML

<a href='javascript: toggle()'><p id="toggle_button" onclick="change_text()">Click here  
for more information!</p></a>

Florian Margaine · Accepted Answer · 2012-12-20 09:16:04Z

4

Not only are you misusing = as ===, but you can also greatly improve your code with a simple technique: caching.

function change_text() {
    var button = document.getElementById('toggle_button');

    if (button.innerHTML === "Click here for more information!") {
        button.innerHTML = "Click here for less information!";
    }
    else {
        button.innerHTML = "Click here for more information!";
    }
}

You can see how way clearer the code becomes.

answered Dec 20, 2012 at 9:16

Florian Margaine

61.2k15 gold badges94 silver badges120 bronze badges

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

1 Comment

Nima Amin Over a year ago

Thank you for your response. It's very much appreciated and works like a charm!

Sudhir Bastakoti · Accepted Answer · 2012-12-20 08:22:20Z

1

if(document.getElementById("toggle_button").innerHTML="Click here for more   
information!"){

should be

if(document.getElementById("toggle_button").innerHTML == "Click here for more   
information!"){

you are assigning rather than comparing, so use == instead of =

answered Dec 20, 2012 at 8:22

Sudhir Bastakoti

100k15 gold badges163 silver badges169 bronze badges

1 Comment

Nima Amin Over a year ago

Thank you for having responded. It's very much appreciated!

Manish Nagar · Accepted Answer · 2012-12-20 09:11:58Z

1

use this for your problem it will help you better-

check equal use '=='

javascript:void(0) use on href

        <html>
          <head>

            <title>index</title>

          </head>
          <body>
           <script type="text/javascript">
                function change_text()
                    {
                        if(document.getElementById("toggle_button").innerHTML=="Click here for more information!")
                        {
                            document.getElementById("toggle_button").innerHTML="Click here for less information!";
                        }
                        else
                        {
                            document.getElementById("toggle_button").innerHTML="Click here for more information!";
                        }
                    }
        </script>
         <a href='javascript:void(0)' onclick="change_text()"><p id="toggle_button" >Click here for more information!</p></a>  

          </body>
        </html>

answered Dec 20, 2012 at 9:11

Manish Nagar

1,0467 silver badges12 bronze badges

1 Comment

Nima Amin Over a year ago

Thank you for having responded. It's very much appreciated!

Alessandro Minoccheri · Accepted Answer · 2012-12-20 08:22:34Z

0

You have miss "=" in

 if(document.getElementById("toggle_button").innerHTML="Click here for more   
    information!")

Try this code:

<script>
function change_text()
{
if(document.getElementById("toggle_button").innerHTML=="Click here for more   
information!"){
document.getElementById("toggle_button").innerHTML="Click here for less
information!";
}else{
    document.getElementById("toggle_button").innerHTML="Click here for more     
information!";
}}
</script>

answered Dec 20, 2012 at 8:22

Alessandro Minoccheri

36.1k22 gold badges128 silver badges176 bronze badges

1 Comment

Nima Amin Over a year ago

Thank you for having responded. It's very much appreciated!

Collectives™ on Stack Overflow

JS Change text onClick then change back onClick If...else

4 Answers 4

1 Comment

1 Comment

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

1 Comment

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related