Getting values from radios, how to optimize it?

June 20, 2022

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>

>Solution :

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>