CODEWITHSUNDEEP
javascripthtml
J. Doe Foe
J. Doe Foe

Reputation: 75

Add value to an array

I'm very new in coding, so be patient please. I've made an array that looks like this:

var minArray = ["Hello", "Hi", "Yes", "No", "Good"];

function printit(number) {
  document.getElementById('test').innerHTML = minArray[number];
}
<form name="f1">
  <input type="text" value="" id="number" />
  <input type="button" value="Word is:" onclick="printit(number)" />
</form>
<br/>
<div id="test" />

And I'd like to write in a number in the text field and then get that specific word from the array. So if I were to write 1 and then press print, the outcome would be: Hi.

Anyone that can nudge me in the right direction?

Upvotes: 3

Views: 103

Answers (6)

Bhagyashree Nirmale
Bhagyashree Nirmale

Reputation: 74

Some code changes 

   <script>
      var minArray = ["Hello", "Hi", "Yes", "No", "Good"];
      function printit()
      {
          var number = document.getElementById("number").value;
          document.getElementById("test").innerHTML =minArray[number];
      }
   </script>


  <form name="f1">
       <input type="text" value="" id="number"/>
       <input type="button" value="Word is:" onclick="printit()"/>
  </form>
     </br>
  <div id="test"/>

Upvotes: 0

Calvin Nunes
Calvin Nunes

Reputation: 6516

You can simply get value like this:

var valueOfArray = minArray[1];

or if you are going to store that writen value into a variable:

var valueOfArray = minArray[storedNumber];

then you can pass it to the html:

document.getElementById('test').innerHTML = valueOfArray;

Also is a good practice to insure that storedNumber is really a number, then parse it and check if is a number:

var minArray = ["Hello", "Hi", "Yes", "No", "Good"];
function printit() {
  var storedNumber = document.getElementById('number').value;
  storedNumber = parseInt(storedNumber);
  if (!isNaN(storedNumber)){
    var valueOfArray = minArray[storedNumber];
    if (typeof valueOfArray != 'undefined'){
      document.getElementById('test').innerHTML = valueOfArray; 
    }else{
      document.getElementById('test').innerHTML= "Number is not valid";
    }
  }else{
    document.getElementById('test').innerHTML= "NaN";
  }
}
<form name="f1">
	    <input type="text" value="" id="number"/>
		  <input type="button" value="Word is:"  onclick="printit()"/>
</form>
<br/>
<div id="test"/>

AND of course, adjust your array name when printing, you are using it as MyArray, but the correct name is minArray

Upvotes: -1

Paul Fitzgerald
Paul Fitzgerald

Reputation: 12129

You are not getting the value of the input correctly. You have two options, both documented below.

To get the value of the input you need to do the following:

document.getElementById('number').value;

You also called your array myArray and minArray.

See full code example below.

var minArray = ["Hello", "Hi", "Yes", "No", "Good"];

function printit() {
  const number = document.getElementById('number').value;
  document.getElementById('test').innerHTML = minArray[number];
}
<form name="f1">
  <input type="text" id="number" />
  <input type="button" value="Word is:" onclick="printit()" />
</form>
</br>
<div id="test" />

You could also pass the event to the input onclick function and get the value from this. You will also have to convert the string to an integer using parseInt.

var minArray = ["Hello", "Hi", "Yes", "No", "Good"];

function printit(event) {
  document.getElementById('test').innerHTML = minArray[parseInt(number.value)];
}
<form name="f1">
  <input type="text" id="number" />
  <input type="button" value="Word is:" onclick="printit(event)" />
</form>
</br>
<div id="test" />

Upvotes: 6

SF..MJ
SF..MJ

Reputation: 880

var minArray = ["Hello", "Hi", "Yes", "No", "Good"];
function printit() {
 var a=document.getElementById('number').value
  document.getElementById('test').innerHTML = minArray[a-1];
}

<form name="f1">
    <input type="text" value="" id="number"/>
    <input type="button" value="Word is:" onclick="printit()"/>
    </form>
 <div id="test"></div>

Upvotes: 0

Saurabh Mistry
Saurabh Mistry

Reputation: 13669

var minArray = ["Hello", "Hi", "Yes", "No", "Good"];
	
	function printit()
	{
   var index=parseInt(document.getElementById('number').value);
   
   if(index>=minArray.length){
   document.getElementById('test').innerHTML ="Not Found";
   }
   else{
   document.getElementById('test').innerHTML = minArray[index];
   
   }
  
	}
<form name="f1">
	    <input type="text" value="" id="number"/>
		  <input type="button" value="Word is:"  onclick="printit()"/>
</form>
<br/>
<div id="test"/>

Upvotes: 0

Lalit
Lalit

Reputation: 1369

Try below code.

HTML elements with ids are global variable. So you can directly refer to input box by using number variable. So in your code if you use number.value it will give you value of input box.

var minArray = ["Hello", "Hi", "Yes", "No", "Good"];

function printit() {
  document.getElementById('test').innerHTML = minArray[number.value];
}
<form name="f1">
  <input type="text" value="" id="number" />
  <input type="button" value="Word is:" onclick="printit(number)" />
</form>
<br/>
<div id="test" />

Upvotes: 0

Related Questions