CODEWITHSUNDEEP
html
Xandawesome
Xandawesome

Reputation: 105

Change Button's Action When Pressing On HTML

I have a script for this game:

<body>
<pre>
<p id="menuText1">Welcome To __________!</p> <!-- No name yet :P -->

<button onclick="menuButtonPressed1()" type="button" id="menuButton1">Cool, is this the whole game?</button>

<script>
function menuButtonPressed1() {
    document.getElementById("menuText1").innerHTML = "No, there's more!";
    document.getElementById("menuButton1").innerHTML = "Can I see it?";
}
</script>


</pre>
</body>

I know how to change the button's label but how do I change what the button actually does? I want to change it so different text shows up when you hit it for a second time.

Upvotes: 0

Views: 98

Answers (1)

partypete25
partypete25

Reputation: 4413

You can use a counter global var that updates every time you press the button. Then based on that counter you can change the functionality.

https://jsfiddle.net/partypete25/zug4Lsfz/6/

<script>
var counter = 0;
function menuButtonPressed1() {
    counter += 1;
    var text = document.getElementById("menuText1");
    var button = document.getElementById("menuButton1");
    if (counter==1){
     text.innerHTML = "No, there's more!";
     button.innerHTML = "Can I see it?";
    } else if (counter==2){
     text.innerHTML = "Second time text";
     button.innerHTML = "second time button label";
    }
}    
</script>

Upvotes: 1

Related Questions