Troubles while trying to use getElementsByClassName to fill value in radio buttons

Question

please.

Have a container on my page filled with links ("link_storage"), where my popup gets links for "value" ("code part bellow"). As you can see it's tied to the IDs, but now I need somehow to switch to class names (for example from old_id_1 to link1_cont).

I was trying to switch to.getElementsByClassName() but didn't succeed.

 function onLinkClickCallBack(event) { let disableClassName = 'disabled'; let linkElement = document.getElementById(event.target.id); // Don't continue if button is disabled if (linkElement.classList.contains(disableClassName)) { return false; } } let inputs = document.getElementsByName('productId'); for (i = 0; i < inputs.length; i++) { if (inputs[i].checked) { let value = inputs[i].value; document.location.href = document.getElementById(value).href; } }

 <div class="link_storage"> <span class="link1_cont" id="old_id_1" style="display: none" href="link1"></span> <span class="link2_cont" id="old_id_2" style="display: none" href="link2"></span> <span class="link3_cont" id="old_id_3" style="display: none" href="link3"></span> </div> <fieldset> <label> <input type="radio" name="productId" id="radio4" value="zone_link_1" checked> <h3>text<br><small>text</small></h3> </label> <label> <input type="radio" name="productId" id="radio5" value="zone_link_2"> <h3>text<br><small>text</small></h3> </label> <label> <input type="radio" name="productId" id="radio6" value="zone_link_3"> <h3>text<br><small>text</small></h3> </label> </fieldset>

Answer 1

Remove zone_ and add _cont to the value, and use that as the class name of the element in link_storage .

 function onLinkClickCallBack(event) { let disableClassName = 'disabled'; let linkElement = document.getElementById(event.target.id); // Don't continue if button is disabled if (linkElement.classList.contains(disableClassName)) { return false; } } let selectedInput = document.querySelector(".productId:checked"); if (selectedInput) { let linkClass = selectedInput.value.replace("zone_") + "_cont"; document.location.href = document.querySelector(`.${linkClass}`).href;

 <div class="link_storage"> <span class="link1_cont" id="old_id_1" style="display: none" href="link1"></span> <span class="link2_cont" id="old_id_2" style="display: none" href="link2"></span> <span class="link3_cont" id="old_id_3" style="display: none" href="link3"></span> </div> <fieldset> <label> <input type="radio" name="productId" id="radio4" value="zone_link_1" checked> <h3>text<br><small>text</small></h3> </label> <label> <input type="radio" name="productId" id="radio5" value="zone_link_2"> <h3>text<br><small>text</small></h3> </label> <label> <input type="radio" name="productId" id="radio6" value="zone_link_3"> <h3>text<br><small>text</small></h3> </label> </fieldset>