Take the form-check-label input

Question

Hello! I have a question to get the input of a form, I already searched here and I found nothing, also not found in the documentation of JS or Bootstrap.

var yearStu = document.querySelector(".form-check-label").value;
  alert(yearStu);

HTML:
<div class="form-check form-check-inline">
        <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1">
        <label class="form-check-label" for="inlineRadio1" value="1º Ano">1º Ano</label>
      </div>
      <div class="form-check form-check-inline">
        <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2">
        <label class="form-check-label" for="inlineRadio2" value="2º Ano">2º Ano</label>
      </div>

This query is only returning me "Undefined". -' I’m just a beginner, if you could give me a hand. Thank you

Answer 1

First: you’re catching the value of label and not of input . According to: you are calling the Alert direct, thus value has not yet been captured, needing a function to display Alert only after the value has been captured:

var yearStu = document.querySelectorAll(".form-check-input");  // referencia os inputs

yearStu.forEach((input) => {  // percorre cada input
  input.onclick = () => {
    alert(input.value)
  }
})

<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" value="1º Ano" name="inlineRadioOptions" id="inlineRadio1">
  <label class="form-check-label" for="inlineRadio1">1º Ano</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" value="2º Ano" name="inlineRadioOptions" id="inlineRadio2">
  <label class="form-check-label" for="inlineRadio2">2º Ano</label>
</div>

I would advise you first to understand the Html and then leave for the Javascript, Without knowing the first will become more difficult learning the second. Great material can be found here.