如何在用户输入中写入数组的编号并获取该特定数组编号的信息？

Question

我需要帮助做功课。这是我坚持了一段时间的任务。以下是任务说明：创建一个包含单词“Hej”、“Nej”、“EJ”、“Leverpastej”、“42”的数组。通过表单，用户必须能够写一个数字，然后你应该在数组中显示位置的单词。例如：输入用户2，应该显示“EJ”这个词。好吧，老实说，我对这项任务感到非常迷茫，我需要我能得到的所有帮助和建议。所以请帮助我。也许建议我如何使用 for 循环或类似的东西。谢谢！    function getFunction() {        var rimm [];        rimm[0] = "Hej";        rimm[1] = "Nej";        rimm[2] = "EJ";        rimm[3] = "Leverpastej";        rimm[4] = "42";        for (var i = 0; i < rimm.length; i++) {            if (rimm[i] == "Nej") {                document.getElementById("skit").innerHTML += " " + rimm[i];            }            else {                document.getElementById("skit").innerHTML += " " + rimm[i];            }            document.getElementById("getnumber").value = rimm[];    }<input type="text" id="getnumber"><input type="button" value="Get" onclick="getFunction()"><p>Skriv ut Skiten:</p><div id="skit"></div>

Answer 1

这比您尝试做的要简单得多。您可以直接按数字访问数组元素，无需循环。只需i从输入和输出中获取rimm[i]。

var rimm = ["Hej", "Nej", "EJ", "Leverpastej", "42"];

function getFunction() {

    var i = document.getElementById("getnumber").value;

    document.getElementById("skit").textContent = rimm[i];

}

<input type="text" id="getnumber">

<input type="button" value="Get" onclick="getFunction()">

<p>Skriv ut Skiten:</p><div id="skit"></div>

您可能需要检查数字是否有效以及是否在数组大小的范围内。我把这留给你。

注意：使用textContent比更好innerHTML，因为后者真正用于显示 HTML 编码的内容。除非这是您的意图，否则就是textContent要走的路。

Answer 2

这是您可以采取的一种方法。我在用户输入上使用了一个事件处理程序和一些验证：

var words = ["Hej", "Nej", "EJ", "Leverpastej", "42"];

//Target our important elements

const userInputEl = document.querySelector('#userInput');

const outputEl = document.querySelector('#output');

//Fuction to validate the user input

const validateInput = input => {

  if (isNaN(input)) {

    outputEl.innerHTML = 'A number value is required!';

    return false;

  }

  if (input > (words.length - 1)) {

    outputEl.innerHTML = `The value must be between 0 and ${words.length - 1}`;

    return false;

  }

  return true;

};

//Add an event listener that will fire when the value in the text input is changed

userInputEl.addEventListener('change', e => {

  if (validateInput(e.target.value))

    outputEl.innerHTML = words[e.target.value];

});

<input id="userInput" type="text">

<div id="output"></div>