0

I have the following set up in html

<input maxlength="1" type="number" min="1" max="4" id ="c0r0"></input>

this has a text box where I can select a number 1 to 4 if I select a number I want it in my js file as a variable

I have tried this in my js file:

var tt = document.getElementsByTagName("input")[0].value;
console.log(tt);

I need it tt var be equal to the input. Do I need to add a button to submit my input? or once I select 1 through 4 my js file can grab the value

Aria West
  • 79
  • 5
  • 1
    Does this answer your question? [How do I get the value of text input field using JavaScript?](https://stackoverflow.com/questions/11563638/how-do-i-get-the-value-of-text-input-field-using-javascript) – Manish Mar 13 '22 at 11:49
  • no it does not I did use that same question to try and see if that would work but when the input is 1 through 4 and not empty tt does not equal the input set – Aria West Mar 13 '22 at 11:53
  • Not sure what is you actual use case. But have answered this with a snippet, check that. Also it will be easy if you can post an example of your code replicating the problem you are facing. That will help you get the appropriate solution. – Manish Mar 13 '22 at 12:22

3 Answers3

0

I would like to point out these two things

  1. <input type="number"> elements are not really made for "selecting" values. Although you can of course use some autocomplete library to help you with that. A <select> element is probably the more natural choice for the task.
  2. The variable you desire can be easily set up. In fact I would suggest to create a const instead:
const tt=document.querySelector("input");

// the "variable" you require is then tt.value:

console.log(tt.value)

In a "real" application you should probably use a more specific CSS selector, like a class or an identity.

Carsten Massmann
  • 26,510
  • 2
  • 22
  • 43
0

You can try and Change :

<input maxlength="1" type="number" min="1" max="4" id ="c0r0"></input>

To :

<input maxlength="1" type="number" min="1" max="4" id="c0r0" />
spaleet
  • 838
  • 2
  • 10
  • 23
0

Below are the two simples ways of doing this.

Method 1:

Attach a change event listener to the input element i.e. a function that's called every time the value changes. Then use the target property of the event to get the value. For more details read this onchange event

Method 2

Get the html element reference using the getElementById (read more) and then use the that element to access the value.

Note: Using getElementById is easy and simple as you get the target element while other methods return a collection and you will have to find the element of concern in the collection.

Below is a small demo of the above recommended methods 

function getValue(event) {
  // Method 1
  var val = event.target.value
  console.log('first box:' + val);
}

function method2() {
  // Method 2
  val = document.getElementById('c1r1').value;
  console.log('second box:' + val)
}
<input maxlength="1" type="number" min="1" max="4" id="c0r0" onchange="getValue(event)" />

<input maxlength="1" type="number" min="1" max="4" id="c1r1" onchange="method2(event)" />
Manish
  • 4,692
  • 3
  • 29
  • 41