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

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

你的代码有问题

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>

Answer 2

首先 - 你的 changeText() 系统有缺陷 - 你在同一时间多次覆盖同一个函数，所以只有一个会永远被调用是您声明的最后一个。 JavaScript 不会等到函数被调用才继续执行程序。
audio.play() 也不起作用 - 但我假设这是一项正在进行的工作。我更改了您的代码，这样每次调用函数时它都会递增，而不是将计数设置为特定值，并将文本更新为数组中的正确值。这是更新后的 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!" 的内容。

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

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

javascript

counter

var

dreamweaver

onclick

你的代码有问题