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>    

Answer 1

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.