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

【问题标题】：How to get dialogue to change upon clicking on an image?单击图像后如何更改对话？
【发布时间】：2015-12-29 08:12:53
【问题描述】：

我正在尝试创建一个带有对话的游戏，并且我希望我的文字随着玩家点击 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>

【问题讨论】：

欢迎来到 SO！首先，您有 2 个名为 changeText() 的函数。其次，您在同一功能中有额外的{}。

标签： javascript onclick counter dreamweaver var

【解决方案1】：

首先 - 你的 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')，如果是这样，请写下“再见！”之类的内容。而是。

【讨论】：

您好，非常感谢！这行得通！但是，有没有办法在我到达最后一个文本时禁用按钮而不是让它说“未定义”？我认为这与 if(text[count]... >

【解决方案2】：

代码中的问题

changeText()的多个函数声明
changeText() 中的额外 {}
您没有更新clicks 的值。
在您的 html 中，您编写了 audo.play()，但没有可用的 audio 对象。应该是play()。我在changeText() 函数中调用了play() 函数。这样可以保持 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>

【讨论】：