How to get value from selected input field (not using id)

Question

I try to do simple code for guessing notes by ear. I have tabs with several empty input fields and you need to put right numbers in these fields according to certain melody (for guitar fretboard) . One button shows first note, another button checks whether you put right or wrong number and depend on it approves or erase your number.

I know how to check every input field using its id's but can i do it such way that when i push 2nd button it get value from selected input and compare it to its placeholder or value attribute?

It is my codepen https://codepen.io/fukenist/pen/BxJRwW Script part

     function showfirst() {
 document.getElementById("fst").value = "12" 
}
  function show1other() {
    var snote = document.getElementById("scnd").value;
    if (snote == 9 ){
      document.getElementById("scnd").value = "9";
    }
    else {
      document.getElementById("scnd").value = "";
    }
  }

Hello. Welcome to StackOverflow. Being an amateur guitarist myself, I find this question very interesting. However, as it stands, it is difficult to understand exactly what you are trying to do (Even being a guitarist myself) can you try rephrasing your question to make it clearer? — Chirag Ravindra
– Chirag Ravindra, Commented May 10, 2018 at 11:48
I want to fill all inputs one by one and check it immediately using 2nd button - for example 2nd note 9 and if i will put number 5 and push button - number will dissapear - if i will put 9 and push - it will stay in field. Now i can do it using id selector for each input different so i need as much functions as inputs i have (or in worse scenari as many buttons) In ideal scenario i need only one button(function) for checking correctness number I hope it help, if not give me more try to explain.) Thanks! — Sergio Iliev
– Sergio Iliev, Commented May 10, 2018 at 13:11

Chirag Ravindra · Accepted Answer · 2018-05-10 14:25:14Z

You can use document.querySelectorAll() to get all your inputs and loop over them.

Sample:

// Get all inputs as an array (actually NodeList, to be precise; but it behaves similar to an array for this use case)
var inputs = document.querySelectorAll('input');

// Function to reveal the first input's value
function showFirst(){
  inputs[0].value = inputs[0].dataset.v;
}

// Function to check all values and clear input if wrong
function checkAll(){
  inputs.forEach(function(input){
    if(input.dataset.v !== input.value){
      // Wrong answer, clear input
      input.value = '';
    }
  });
}

<input data-v="12" size="2" value=""/>
<input data-v="9" size="2" value=""/>
<input data-v="8" size="2" value=""/>
<br/>
<button onclick="showFirst()">Show First</button>
<button onclick="checkAll()">Check All</button>

Notes:

I have used data-v to store the correct answer instead of placeholder as that attribute has a semantically different meaning
It may be out of turn but my two cents: Writing out entire songs like this by hand may become tedious. Consider using a JSON string or something similar to map out the tabs and use a templating framework to align them.. Some things you may need to look out for while designing something like this : Alignment of notes (successive notes, simultaneous notes), timing of the song, special moves like slide, hammer on etc.
It may be a better idea to make the Guitar Strings be a background element (either as a background-image or as absolutely positioned overlapping divs) (so You don't have to worry about the lines going out of alignment)

Reference:

HTMLElement.dataset

document.querySelectorAll

Collectives™ on Stack Overflow

How to get value from selected input field (not using id)

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related