How do I write a number of the array in a user-input and get out the information of that particular array number?

Question

I need help with schoolwork. It is an assignment I have been stuck for on a while. Here is the assignment description:

Create an array with the words "Hej", "Nej", "EJ", "Leverpastej", "42". Through a form, the user must be able to write a number and you should then display the position's words in the array. For example: enter the user 2, the word "EJ" should be displayed.

Okay, to be honest, I am so lost with this assignment that I need all help and suggestions I can get. So please help me. Maybe suggest how I can use the for loop or something the like.

Thank you!

  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

It is much simpler than you are trying to do. You can access an array element by number directly, without a loop. Just get i from the input, and output 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> 

You may want to add a check whether the number is valid and within the range of the array size. I leave this up to you.

NB: It is better to use textContent than innerHTML , as the latter is really intended for showing HTML-encoded content. Unless that is your intention, textContent is the way to go.

Answer 2

Here is one approach you can take. I used an event handler and some validation on the user input:

 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> 

Answer 3

Check this fiddle: 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;

}