将随机字符串传输到 .innerHTML

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

• 将这些文本存储到一个数组中并使用随机数。
• 获取随机数如下：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>

Answer 4

您的问题集中在如何动态构造变量名，但通常会出现这个问题，因为您尝试的解决方案是基于一种编码模式，这让您陷入了困境。与其编写具有潜在危险或过于复杂的解决方案，不如重新考虑您的方法。

当您有几条数据要存储但没有键名时，您应该将这些数据存储在一个数组中。将数据存储在数组中的优势是巨大的。因此，您应该将字符串放入数组中，而不是所有必须具有相似名称的单个变量。因此，现在您需要担心的变量更少了，也无需将变量名设置为特定值，动态创建变量名的问题也完全解决了。

您现在需要做的就是使用随机数作为数组的索引。不要调整随机数使其从 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>