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, Dec 21 '14 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, Dec 21 '14 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, Dec 21 '14 at 13:48
oh okay. so what would be a better solution that a new person to js could understand? — Hex Merchant, Dec 21 '14 at 13:50

Amir Keren · Answer 1 · 2014-12-21T14:00:54.090

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 '14 at 14:00

answered Dec 21 '14 at 13:50

Amir Keren

201
2
7

If it's replacing the text inside the button now, what element is causing that? – Hex Merchant Dec 21 '14 at 14:00
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. – Amir Keren Dec 21 '14 at 14:01

score 0 · Answer 2 · answered Dec 21 '14 at 14:08

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>

matthias_h · Accepted Answer · 2014-12-21T14:26:12.503

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 '14 at 14:26

answered Dec 21 '14 at 14:18

matthias_h

11,356
9
22
40

Currently Fiddling with this idea I receive an exploreFunction is not defined now so looking where I messed up xD – Hex Merchant Dec 21 '14 at 14:34
@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). – matthias_h Dec 21 '14 at 14:39
@matthias_h1 I don't know the difference between No wrap and onLoad? – Hex Merchant Dec 21 '14 at 14:48
@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 Dec 21 '14 at 14:55
Uncaught SyntaxError: Unexpected token ILLEGAL var story = – Hex Merchant Dec 21 '14 at 14:59
@HexMerchant That's because of the newline in the story, you can either have it as oneliner or add a \ at the end of the first line. See http://stackoverflow.com/questions/14170153/syntaxerror-unterminated-string-literal-strange-error Adjusted Fiddle http://jsfiddle.net/36Luy7cv/ to clarify - notice the \ behind "deposit". – matthias_h Dec 21 '14 at 15:11
ah okay, didn't know about that rule. Thanks that fixed it~ This is a good solution to my current issue. – Hex Merchant Dec 21 '14 at 15:35
@HexMerchant Glad that I was able to help you. If this answered your question, you can consider to accept this answer so the question will be marked as closed/solved. As I noticed you're new to Stackoverflow and maybe don't know how this works and why, just check http://meta.stackexchange.com/questions/5234/how-does-accepting-an-answer-work#answer-5235 – matthias_h Dec 21 '14 at 15:46

score 0 · Answer 4 · answered Dec 21 '14 at 14:25

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

Making a clickable button change text

4 Answers4