Question

源代码链接：http://hexmerchant.github.io/

我希望每次单击此按钮时都会显示不同的文本。我正在使用html，css和js。

<button onclick="exploreFunction()">Explore</button>

那是按钮。这是第一个功能。

function exploreFunction() {
    var person = prompt("What is your name", "");

    if (person != null) {
        document.getElementById("story1").innerHTML =
        "-You wake up lying on the ground. You feel a large deposit of energy inside you.";
    }
}

我需要做些什么来完成这项工作？

这可以帮助多人出局。当我在这里寻找答案时，我意识到每个答案都是如此具体，以至于我无法找到与我的主题匹配的内容。

我对这一切都很陌生，并试图自学......到目前为止：）

Answer 1

只需在按钮上添加ID，例如 -

<button id="myButton" onclick="exploreFunction()">Explore</button>

然后你可以添加到exploreFunction（）一个非常类似的命令来改变你的文字 -

document.getElementById("myButton").value = "New display text";

Answer 2

如果您希望每次都更改文本，可以根据需要从提示中插入名称。

＆＃13;

function exploreFunction() {
  var person = prompt("What is your name", "");

  if (person != null) {
    document.getElementById("story1").innerHTML =
      person + ", you wake up lying on the ground. You feel a large deposit of energy inside you.";
  }
}

＆＃13;

<button onclick="exploreFunction()">Explore</button>
<div id="story1"></div>

＆＃13;

Answer 3

如果您希望故事中的文本在每次单击按钮时更改，并且仅在第一次单击按钮时显示提示，则可以使用以下方法：

var current = 0;
var person;
var story = ["-You wake up lying on the ground. You feel a large deposit of 
    energy inside you.", "-You go to the right.", "-The path is blocked."];

function exploreFunction() {
  if (current == 0) {
    person = prompt("What is your name", "");
  }
  if (person != null) {
    document.getElementById("story1").innerHTML = story[current];
    current += 1;
  }
}

并为故事添加元素。 Fiddle
为了避免在显示故事的最后一个元素时出现任何错误，您可以删除/禁用该按钮或调整功能以显示文本，例如像这样：

if (person != null && current < story.length) {
...

为此调整Fiddle。

Answer 4

此功能不具体但通用。使用下面的代码，您可以根据需要将此功能分配给所有按钮。我建议你将不同的文本存储在一个数组中

例如

<button onclick="exploreFunction(this, functionNext)" >Explore</button>

function exploreFunction(button, functionToContinue) {
    var person = prompt("What is your name", "");

    if (person != null) {
        document.getElementById("story1").innerHTML =
        "-You wake up lying on the ground. You feel a large deposit of energy inside you.";
        button.onclick = functionToContinue;
    }


}


function functionNext()
{
        //Example code  
        document.getElementById("story1").innerHTML =
        "-The tooth fairy really came through and you feel enchanted."; 
        //Other code come here          

        this.onclick = [new function]; //add your own function name here do not add () because it will get executed when you do, and you want it executed when the user clicks the button.
}

上面的代码是做什么的：

将exploreFunction添加到按钮（通过将其添加到参数中来引用自身）。
提供下一个函数作为参数
函数exploreFunction执行，提示名称并更新story1的innerHTML。
按钮指的是输入元素。分配新的onclick处理程序functionNext
下次用户点击按钮functionNext时会执行。
functionNext分配另一个onclick处理程序（由您制作）。

你是否正在捕捉漂移？

由于exploreFunction中有按钮对象，后续函数中还有this 变量是指按钮对象，可以调整此按钮的其他属性。比如价值。

functionNext中的示例：

 this.value = "Click me to advance";

使可点击按钮更改文本

4 个答案: