Как мне записать номер массива в пользовательский ввод и получить информацию об этом конкретном номере массива?

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

Проверьте эту скрипку: https://jsfiddle.net/85rbu79d

<input type="number" id="getnumber">
<input type="button" value="Get" onclick="getVal()">
<p>Skriv ut Skiten:</p><div id="skit"></div>
<script>
var rimm = ["Hej", "Nej", "EJ", "Leverpastej", "42"];

function getVal() {
    var input = document.getElementById('getnumber').value,
    val = rimm[input] || 'Not an option';

    document.getElementById('skit').innerHTML = 'Value from array: ' + val;

}

Answer 3

Вот один из подходов, который вы можете использовать. Я использовал обработчик событий и некоторую проверку ввода пользователя:

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>