單擊圖像后如何更改對話框？

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！”的字樣。 代替。