How to get dialogue to change upon clicking on an image?

Question

I'm trying to create a game with dialogue, and I want my text to change as the player clicks on a next image to progress the story.

For example:

Page loads - "Hi, I'm Joe."

Clicks sliced Image once - "Nice to meet you."

Clicks 2nd time - "How are you?"

I have tried onClick but that only allows me to change it once, I've tried using var counter as well but to no avail, it overrides my previous commands, which part of this am I doing wrong here?

 var clicks = 0; function changeText() { { clicks = 1; document.getElementById('text').innerHTML = "Ughh... my head... What happened...?"; } } function changeText() { { clicks = 2; document.getElementById('text').innerHTML = "Testing 1 2 3"; } } function play() { var audio = document.getElementById("audio"); audio.play(); } 

 <img onClick="changeText(); audio.play()" value=Change Text src="images/awaken/images/awaken_03.jpg" alt="" width="164" height="77" id="clicks" /> <p id="text">Where... am I...?</p> 

Answer 1

Issues in your code

1. Multiple function declaration of changeText()
2. Extra {} in changeText()
3. You are not updating value of clicks .
4. In your html, you have written audo.play() but no audio object is available. It should be play() . I have called play() function in changeText() function. This keeps HTML clean.

Following is updated code:

 var clicks = 0; function changeText() { var text = "" clicks++; switch(clicks){ case 1: text = "Ughh... my head... What happened...?"; break; case 2: text = "Testing 1 2 3"; break; } document.getElementById('text').innerHTML = text; play(); } function play() { var audio = document.getElementById("audio"); audio.play(); } 

 <img onClick="changeText()" value=Change Text src="images/awaken/images/awaken_03.jpg" alt="" width="164" height="77" id="clicks" /> <p id="text">Where... am I...?</p> 

Answer 2

First off all - your changeText() system is flawed - you're overwriting the same function multiple times at the same time , so the only one of those that will ever get called is the last one you declare. JavaScript doesn't wait until a function gets called to continue with the program.
The audio.play() also won't work - but I'm assuming that's a work in progress. I changed your code so that instead of setting count to a specific value, it increments every time the function gets called, and it updates the text to the correct value in an array. Here's the updated changeText function:

var count = 0;
var text = [
"Where... am I...?", /* note that this will never get called, it's simply here for filling up the array*/
"This is the first text!",
"And this is the second!"
]
var changeText = function() {
   count++;
   document.getElementById('text').innerHTML = text[count];
}

In the future, you'll probably also want to check if(text[count] != 'undefined') , and if so write something like "Bye!" instead.