从事件单击按钮获取 InertText（对于 GTM）

Question

I tried to get innerText from a click button with js event for exemple :

 <label class="sc-AxirZ haYsgf"> <span>brouh</span> <span></span> <input type="radio" name="bruh" value="bruh1"> </label> <label class="sc-AxirZ haYsgf"> <span>test</span> <span></span> <input type="radio" name="bruh1" value="bruh2"> </label> <label class="sc-AxirZ haYsgf"> <span>test2</span> <span></span> <input type="radio" name="bruh3" value="bruh4"> </label>

I would like to get the value of the button when I clicked on it. (get "moins de 20 ans" if I clicked on it) The only one prob it's, I've more than one button with the same class

Can you help me, please? I try to do this for Google Tag Manager to get values.

Thanks a lot

Answer 1

Attach event listeners to the radio buttons and call a function when they change.

 const radios = document.querySelectorAll('input[type="radio"]'); radios.forEach(radio => radio.addEventListener('change', handleChange, false)); function handleChange(e) { console.log(e.target.value); }

 <label class="sc-AxirZ haYsgf"><span>Moins de 25 ans</span><span></span><input type="radio" name="BAS110Q" value="BAS110R01"></label> <label class="sc-AxirZ haYsgf"><span>Moins de 20 ans</span><span></span><input type="radio" name="BAS110Q" value="BAS110R02"></label> <label class="sc-AxirZ haYsgf"><span>Moins de 29 ans</span><span></span><input type="radio" name="BAS110Q" value="BAS110R03"></label>

Alternatively you can wrap your radio buttons in a container and apply the event listener to that element.

 const container = document.querySelector('#container'); container.addEventListener('change', handleChange, false); function handleChange(e) { console.log(e.target.value); }

 <div id="container"> <label class="sc-AxirZ haYsgf"><span>Moins de 25 ans</span><span></span><input type="radio" name="BAS110Q" value="BAS110R01"></label> <label class="sc-AxirZ haYsgf"><span>Moins de 20 ans</span><span></span><input type="radio" name="BAS110Q" value="BAS110R02"></label> <label class="sc-AxirZ haYsgf"><span>Moins de 29 ans</span><span></span><input type="radio" name="BAS110Q" value="BAS110R03"></label> </div>

Additional documentation

• querySelectorAll

• addEventListener