Question

我想通过.InnerHTML随机更改div的内容。文本保存为变量。随机数是另一个变量。问题是，如果我将文本和随机数放在一起，它将打印text1，例如。

有人可以帮我吗？

function switchText(){
var text1 = "hello";
var text2 = "there";
var text3 = "ObiWan";

var randomNumber = Math.floor(Math.random() * 3) + 1;//creates random No. from 1 - 3

document.getElementById("randomText").innerHTML = "text" + randomNumber;
//the problem
}

<div id="randomText" onclick="switchText();">click here</div>

Answer 1

如何将所有随机字符串存储在数组中，如下所示：

function switchText(){
    var randomWords = ["hello", "there", "ObiWan"];

    var randomIndex = Math.floor(Math.random() * 3);//creates random No. from 1 - 3

    document.getElementById("randomText").innerHTML = randomWords[randomIndex];
    //the problem
}

Answer 2

实际上你可以使用索引表示法来访问这些变量（它的描述非常好here）所以在你的特定功能情况下你只需要改变你尝试访问变量的行

document.getElementById("randomText").innerHTML = this['text' + randomNumber];

然而，虽然这种表示法不是我推荐的。建议使用数组实际上更具可读性。

Answer 3

您的问题主要集中在如何动态构建变量名称，但通常会出现此问题，因为您尝试的解决方案基于将您装入角落的编码模式。而不是编写有潜在危险的解决方案或过于复杂的解决方案，重新考虑您的方法。

每当你要存储几个没有密钥名称的数据时，你应该将这些数据存储在一个数组中。将数据存储在阵列中的优点是巨大的。因此，您应该将字符串放在一个数组中，而不是所有必须具有相似名称的单个变量。因此，现在您需要担心的变量较少，并且没有必须设置为特定值的变量名称，并且动态创建变量名称的问题已完全消失。

现在您需要做的就是使用随机数作为数组的索引。不要调整随机数使其基于1，因为数组是从0开始的。并且，当您获得随机数时，将其乘以数组的length，而不是硬编码数字。这样，您所要做的就是向数组中添加/删除字符串，以使它们成为可能的结果字符串。

这种结构和解决方案使您的代码更简单，更灵活。

另外，请勿使用HTML事件属性设置事件处理程序。有many reasons why you shouldn't use this 25+ year old technique。用JavaScript做。

var strings = ["hello","there","ObiWan"];  // Store the possible strings in an array

var btn = document.getElementById("randomText");  // Get a reference to the trigger element
var output = document.getElementById("output");   // And the output area

// Set up the event handler in JavaScript, not HTML
btn.addEventListener("click", function(){
  // Set the output to a string from the array using a random index
  output.innerHTML = strings[Math.floor(Math.random() * strings.length)];
});

<button id="randomText">click here</button>
<div id="output"></div>

Answer 4

将这些文本存储到数组中并使用随机数。
获取以下随机数：Math.floor(Math.random() * 3)

function switchText(){
var texts = ["hello", "there", "ObiWan"];

var randomNumber = Math.floor(Math.random() * 3);//creates random No. from 1 - 3
console.log(randomNumber)
document.getElementById("randomText").innerHTML = texts[randomNumber];
//the problem
}

<div id="randomText" onclick="switchText();">click here</div>

您也可以将这些文本存储到对象中。

function switchText() {
  var texts = {
    "text1": "hello",
    "text2": "there",
    "text3": "ObiWan"
  };

  var randomNumber = Math.floor(Math.random() * 3) + 1; //creates random No. from 1 - 3
  console.log(randomNumber)
  document.getElementById("randomText").innerHTML = texts[`text${randomNumber}`];
  //the problem
}

<div id="randomText" onclick="switchText();">click here</div>

将随机字符串传输到.innerHTML

4 个答案: