如何在点击图片时进行对话更改？(How to get dialogue to change upon clicking on an image?)

我正在尝试创建一个带对话的游戏，我想让我的文字随着玩家点击next图片来改变故事。

例如：

Page loads - "Hi, I'm Joe." Clicks sliced Image once - "Nice to meet you." Clicks 2nd time - "How are you?"

我试过onClick但是只允许我改变它一次，我也尝试过使用var计数器但无效，它会覆盖我以前的命令，这部分是我在这里做错了吗？

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

                最满意答案
                
                    
                         首先，你的changeText（）系统存在缺陷 - 你同时多次覆盖同一个函数，因此唯一一个被调用的是你声明的最后一个。 JavaScript不会等到函数被调用以继续该程序。  audio.play（）也不起作用 - 但我认为这是一项正在进行中的工作。 我更改了代码，以便不是将count设置为特定值，而是每次调用函数时它都会递增，并且它会将文本更新为数组中的正确值。 这是更新后的changeText函数：  
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];
}
 
 在将来，您可能还想检查if(text[count] != 'undefined') ，如果是这样的话，请写下“Bye！”之类的内容。 代替。 
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.