Making a clickable button change text

Question

Source Code link: http://hexmerchant.github.io/

I'm looking to make this button display different text each time I click it. i'm using html, css, and js.

<button onclick="exploreFunction()">Explore</button>

That's the button. Here is the first function.

function exploreFunction() {
    var person = prompt("What is your name", "");

    if (person != null) {
        document.getElementById("story1").innerHTML =
        "-You wake up lying on the ground. You feel a large deposit of energy inside you.";
    }
}

What do I need to do to accomplish this?

This could help multiple people out. As I was searching around for an answer here I realized that each answer was so specific that I could not find a match for my topic.

I'm very new to all this and trying to teach myself... got this far : )

Answer 1

Just add an ID to the button, like -

<button id="myButton" onclick="exploreFunction()">Explore</button>

And then you can add to exploreFunction() a very similar command to what you did to change the text -

document.getElementById("myButton").value = "New display text";

Answer 2

If you want the text to change every time, you can insert the name from the prompt if you like.

 function exploreFunction() { var person = prompt("What is your name", ""); if (person != null) { document.getElementById("story1").innerHTML = person + ", you wake up lying on the ground. You feel a large deposit of energy inside you."; } } 

 <button onclick="exploreFunction()">Explore</button> <div id="story1"></div> 

Answer 3

If you want the text in the story to change on every button click and the prompt only to be displayed the first time the button is clicked, you could use following approach:

var current = 0;
var person;
var story = ["-You wake up lying on the ground. You feel a large deposit of 
    energy inside you.", "-You go to the right.", "-The path is blocked."];

function exploreFunction() {
  if (current == 0) {
    person = prompt("What is your name", "");
  }
  if (person != null) {
    document.getElementById("story1").innerHTML = story[current];
    current += 1;
  }
}

and add elements to the story. Fiddle
To avoid any errors when the last element of the story is displayed, you can either remove / disable the button or adjust the function to display the text eg like this:

if (person != null && current < story.length) {
...

Adjusted Fiddle for that.

Answer 4

This function isn't specific but generic. With the code below you can assign this function to all buttons if you like. I'd advice you to store your different texts in an array

example

<button onclick="exploreFunction(this, functionNext)" >Explore</button>

function exploreFunction(button, functionToContinue) {
    var person = prompt("What is your name", "");

    if (person != null) {
        document.getElementById("story1").innerHTML =
        "-You wake up lying on the ground. You feel a large deposit of energy inside you.";
        button.onclick = functionToContinue;
    }


}


function functionNext()
{
        //Example code  
        document.getElementById("story1").innerHTML =
        "-The tooth fairy really came through and you feel enchanted."; 
        //Other code come here          

        this.onclick = [new function]; //add your own function name here do not add () because it will get executed when you do, and you want it executed when the user clicks the button.
}

What does the code above do:

1. Adds the exploreFunction to the button (refer to itself by adding this to the arguments).
2. Supply the next function as argument
3. function exploreFunction get executed , name is prompted and innerHTML of story1 is updated.
4. button refers to the input element. Assign a new onclick handler functionNext
5. Next time the user clicks on the button functionNext gets executed.
6. functionNext assigns another onclick handler (to be made by you).

Are you catching the drift?

Since you have the button object in exploreFunction and also in the subsequent functions the this variable refers to the button object, you can adjust other properties of this button. Such as the value.

example in the functionNext :

 this.value = "Click me to advance";