javascript - 根据用户输入选择 JavaScript 变量和数组元素

Question

我想根据用户输入从数组中选择一个元素。下面是我如何尝试执行此操作的示例。用户将输入 1,2 或 3(在本例中)。然后，根据此输入的结果，将选择 a 变量之一。然后，将选择该变量/数组中的随机元素显示在段落标记中。

// user input must be 1,2 or 3 (in this example)
<input type="number" id="userInput">
<script>
    var ageNum = [0,1,2];
    var a1 = ["string1.1","string2.1","string3.1"];
    var a2 = ["string1.2","string2.2","string3.2"];
    var a3 = ["string1.3","string2.3","string3.3"];
    var selectedA = ["a"+userInput.toString()];
    var rdnNum = ageNum[Math.floor(Math.random()*ageNum.length)];
    document.getElementById("display_string").innerHTML = selectedA[rdnNum];
</script>

<p id="display_string">...</p>

这只是我尝试过的一个例子(失败了)，但我愿意接受任何解决问题的新方法。

Answer 1

您应该处理二维数组以轻松获取相应的消息。 DOM 元素是基于事件的。因此，您应该使用事件监听器。

var msgs = [
["string1.1","string2.1","string3.1"], // a1
["string1.2","string2.2","string3.2"], // a2
["string1.3","string2.3","string3.3"]  // a3
];

document.getElementById('userInput').addEventListener('change', function (e) {
  var selectedArray = msgs[parseInt(e.target.value)];
  var randomIdx = parseInt(Math.random() * selectedArray.length);
    var randomMessage = selectedArray[randomIdx]
    document.getElementById("display_string").innerHTML = randomMessage
});

Check this fiddle to see my approach