is there a better way to optimize my code and to avoid duplication
let results1 = document.getElementById("results1"); let results2 = document.getElementById("results2"); let results3 = document.getElementById("results3"); results1.innerHTML = '50 %'; results2.innerHTML = '100 $'; results3.innerHTML = '150 $'; document.querySelector("div.btn-group").addEventListener("click", function(evt) { if (evt.target.type === "radio") { if (evt.target.value == 0) { console.log(evt.target.value) results1.innerHTML = '50 %'; results2.innerHTML = '100 $'; results3.innerHTML = '150 $'; } if (evt.target.value == 1) { results1.innerHTML = '150 %'; results2.innerHTML = '200 $'; results3.innerHTML = '350 $'; } if (evt.target.value == 2) { results1.innerHTML = '250 %'; results2.innerHTML = '300 $'; results3.innerHTML = '450 $'; } } });
Select your plan <div class="btn-group border" data-toggle="buttons"> <label id='RADIO' class="btn btn-light"> <input type="radio" name="test" value="0" checked> weekly </label> <label class="btn btn-light"> <input type="radio" name="test" value="1"> monthly </label> <label class="btn btn-light"> <input type="radio" name="test" value="2"> yearly </label> </div> <table class="table mt-4"> <tr> <th>Weekly</th> <th>Montly</th> <th>Yearly</th> </tr> <tr> <td><span id="results1"></span></td> <td><span id="results2"></span></td> <td><span id="results3"></span></td> </tr> <tr> <td>full access</td> <td>free support</td> <td>everything</td> </tr> </table>
Advertisement
Answer
You can store the values directly inside the option
element as data-*
attributes and read them in the event handler
let results1 = document.getElementById("results1"); let results2 = document.getElementById("results2"); let results3 = document.getElementById("results3"); results1.innerHTML = '50 %'; results2.innerHTML = '100 $'; results3.innerHTML = '150 $'; document.querySelector("div.btn-group").addEventListener("click", function(evt) { if (evt.target.type === "radio") { results1.innerHTML = evt.target.dataset.r1 results2.innerHTML = evt.target.dataset.r2 results3.innerHTML = evt.target.dataset.r3 } });
Select your plan <div class="btn-group border" data-toggle="buttons"> <label id='RADIO' class="btn btn-light"> <input type="radio" name="test" value="0" checked data-r1="50 %" data-r2="100 $" data-r3="150 $"> weekly </label> <label class="btn btn-light"> <input type="radio" name="test" value="1" data-r1="150 %" data-r2="200 $" data-r3="350 $"> monthly </label> <label class="btn btn-light"> <input type="radio" name="test" value="2" data-r1="250 %" data-r2="300 $" data-r3="450 $"> yearly </label> </div> <table class="table mt-4"> <tr> <th>Weekly</th> <th>Montly</th> <th>Yearly</th> </tr> <tr> <td><span id="results1"></span></td> <td><span id="results2"></span></td> <td><span id="results3"></span></td> </tr> <tr> <td>full access</td> <td>free support</td> <td>everything</td> </tr> </table>