单击图像后如何更改对话框？

Question

我正在尝试创建一个带有对话的游戏，并且我希望随着玩家单击next一幅图像来推动故事的进行而更改文本。

例如：

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

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

Clicks 2nd time - "How are you?"

我尝试过onClick但只允许更改一次，我也尝试过使用var counter但无济于事，它会覆盖我以前的命令，这是我在这部分做错了吗？

 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

代码中的问题

1. changeText()多功能声明
2. changeText()额外{}
3. 您不是在更新clicks价值。
4. 在您的html中，您已经编写了audo.play()但是没有audio对象可用。 应该是play() 。 我呼吁play()函数changeText()函数。 这样可以使HTML保持干净。

以下是更新的代码：

 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

首先要明确的-你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！”的字样。 代替。