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 : )

what do you mean by different text. do you store desired texts somewhere? — sadrzadehsina
– sadrzadehsina, Commented Dec 21, 2014 at 13:46
"-You wake up lying on the ground. You feel a large deposit of energy inside you."; change this so another text pops up when I click the button rather then the prompt window again and this text — Hex Merchant
– Hex Merchant, Commented Dec 21, 2014 at 13:48
You have already done it with the story1 element. The same idea applied to the button. Give it a id and assign its innerHTML. The reason you wont find an answer as the way you want to go about it is probably not the best way. — haxtbh
– haxtbh, Commented Dec 21, 2014 at 13:48
oh okay. so what would be a better solution that a new person to js could understand? — Hex Merchant
– Hex Merchant, Commented Dec 21, 2014 at 13:50

Amir Keren · Accepted Answer · 2014-12-21 14:00:54Z

4

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";

edited Dec 21, 2014 at 14:00

answered Dec 21, 2014 at 13:50

Amir Keren

2211 gold badge2 silver badges7 bronze badges

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

2 Comments

Hex Merchant Over a year ago

If it's replacing the text inside the button now, what element is causing that?

Amir Keren Over a year ago

You can choose whatever ID you want for the button as long as it's unique. Just remember to change the getElementById command to the right ID.

matthias_h · Accepted Answer · 2014-12-21 14:26:12Z

0

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 e.g. like this:

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

Adjusted Fiddle for that.

edited Dec 21, 2014 at 14:26

answered Dec 21, 2014 at 14:18

matthias_h

11.4k9 gold badges24 silver badges40 bronze badges

8 Comments

Hex Merchant Over a year ago

Currently Fiddling with this idea I receive an exploreFunction is not defined now so looking where I messed up xD

matthias_h Over a year ago

@HexMerchant Happened to me while fiddling at first, too, cause I'm too used to use jquery instead of pure javascript :) . As you noticed the Fiddles in my answer are working - maybe you have to adjust the 2nd select box on the left to "No wrap - in (head)" instead of "onLoad" (fixed it for me).

Hex Merchant Over a year ago

@matthias_h1 I don't know the difference between No wrap and onLoad?

Hex Merchant Over a year ago

@matthias_h1 also when I said fiddling with this idea I meant working on it but Fiddle is a cool tool thanks for sharing it

Hex Merchant Over a year ago

Uncaught SyntaxError: Unexpected token ILLEGAL var story =

|

Ian Hazzard · Accepted Answer · 2014-12-21 14:08:10Z

0

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>

answered Dec 21, 2014 at 14:08

Ian Hazzard

7,7688 gold badges37 silver badges61 bronze badges

Comments

Mouser · Accepted Answer · 2014-12-21 14:25:33Z

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:

Adds the exploreFunction to the button (refer to itself by adding this to the arguments).
Supply the next function as argument
function exploreFunction get executed , name is prompted and innerHTML of story1 is updated.
button refers to the input element. Assign a new onclick handler functionNext
Next time the user clicks on the button functionNext gets executed.
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";

Collectives™ on Stack Overflow

Making a clickable button change text

4 Answers 4

2 Comments

8 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

8 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related