Get the value of a child input using JavaScript by its class parent

user_15042944 0
Viewed 438

I'd like to get the input value by the label class using Javascript, not Jquery. My html code is:

<label class="btn btn-secondary button-calculator">
   <input type="radio" name="units[]" id="units1" value="1" autocomplete="off"> US units
</label>

<label class="btn btn-secondary button-calculator  active">
   <input type="radio" name="units[]" id="units2" value="2" autocomplete="off" checked=""> Metric units
</label>

I've tried with

document.getElementsByClassName("active").children

and

document.getElementsByClassName("active").value

and checking the console.log values but i don't get anything useful.

Thanks in advance.

html javascript
4 Answers

First of all, since you're using getElementsByClassName as your initial selector, you will receive a collection of elements. If you're sure that in your whole page there's only one element with that class, you can access it with [0] otherwise you need to loop the element.

In code:

document.getElementsByClassName("active")[0]

Now that you have your label element, you can retrieve all the child nodes with childNodes. To only retrieve the input based on your current HTML code, you can use querySelector('input')

In code

document.getElementsByClassName("active")[0].querySelector('input[name="units[]"]')

The above code might cause issues if you use the active class anywhere else in your page. And since the active class is quite common, you might want to be more specific with your selector.

My suggestion would be to use the button-calculator class together with the active class.

So in code:

document.getElementsByClassName("active button-calculator")[0].querySelector('input[name="units[]"]')
user_15293240

In case of child elements, you need to select elements of the parent instead of document.

let labels = document.querySelectorAll(".button-calculator");
let input1 = labels[0].querySelector("input").value;
let input2 = labels[1].querySelector("input").value;

console.log(`Input 1: ${input1}`)
console.log(`input 2: ${input2}`);
<label class="btn btn-secondary button-calculator">
   <input type="radio" name="units[]" id="units1" value="1" autocomplete="off"> US units
</label>

<label class="btn btn-secondary button-calculator  active">
   <input type="radio" name="units[]" id="units2" value="2" autocomplete="off" checked=""> Metric units
</label>

user_138702090

getElementsByClassName will retrieve an array-like live nodelist of elements - array-like because it looks like an array but it doesn't have access to the majority of the array methods.

Use querySelectorAll to grab all the active elements. Then you can coerce that to an array (Array.from(nodelist) or [...nodelist]) and map over it returning the values of the inputs as an array of integers.

const active = document.querySelectorAll('.active');

const values = [...active].map(a => {
  return +a.querySelector('input').value;
});

console.log(values);
<label>
<input type="radio" name="units[]" value="1">US units</input>
</label>
<label class="active">
   <input type="radio" name="units[]" value="2" checked>Metric units</input>
</label>
<label>
<input type="radio" name="units2[]" value="1">Things</input>
</label>
<label class="active">
   <input type="radio" name="units2[]" value="5" checked>Other things</input>
</label>

user_13770020

You can use querySelector and/or querySelectorAll to target the label by class and then the input elements within the active labels - like so:

( 3rd input added for clarity )

document.querySelectorAll('label.active input').forEach( input=>{
  input.addEventListener('click',e=>{
    console.info('Changed value: %s for %s',e.target.value,e.target.id)
  });
  
  console.info('Initial value: %s for %s',input.value,input.id)
})
<label class="btn btn-secondary button-calculator">
   <input type="radio" name="units[]" id="units1" value="1" autocomplete="off"> US units
</label>

<label class="btn btn-secondary button-calculator  active">
   <input type="radio" name="units[]" id="units2" value="2" autocomplete="off" checked=""> Metric units
</label>

<label class="btn btn-secondary button-calculator  active">
   <input type="radio" name="units[]" id="units3" value="3" autocomplete="off"/> Imperial units
</label>

user_36036810
Related