Hello!

There is an HTML block where input is hidden using styles, and the label is a button ( http://viralpatel.net/blogs/css-radio-button-checkbox-background/ ):

 <input type="radio" name="type" value="20" value="20"> <label for="20">20</label>

I need by pressing y input to get the value value="20"

In javascript:

 document.addEventListener('click', function(e){ console.log(e.target) });

In the console, two events are displayed by a mouse click, one belongs to <label> , the other <input> . If you write console.log (e.target.value), then the label will be undefined , input = 20.

I do not think that is correct. What is the best way to get a value for input only, without affecting the label (without jQuery)?

    1 answer 1

    1. You incorrectly use the for attribute on a label . It must be equal to the id associated input .
    2. You put addEventListener not on a specific element, but on the whole document.

    Click on the number and the value will appear below.

     var input = document.getElementById("name_id"); input.addEventListener('click', function(e){ console.log(input.value); }); 
     input { display: none; } 
     <input id="name_id" type="radio" name="type" value="20"> <label for="name_id">20</label>

    Useful links:
    webref.ru label
    MDN EventTarget.addEventListener ()

    • And if there are a lot of such inputs? - andreymal