Change data when each radio is checked-CodePudding

On h1, the unit should be changed to either celsius or fahrenheit depending on which radio is checked. But how do I change the unit to "celsius" when C radio or "Fahrenheit" when F radio is checked?

<div >
  <input type="radio"  id="celsius" name="unit" checked="checked">
  <label for="celsius" >° C</label>
  <input type="radio"  id="fahrenheit" name="unit">
  <label for="fahrenheit" >° F</label>
</div>
<h1></h1>

const d = document;
const F = d.querySelector("#fahrenheit");
const C = d.querySelector("#celsius");

const checkState = () => {
  if (F.checked === true) {
    x = "fahrenheit";
    return x;
  }
  if (C.checked === true) {
    x = "celsius";
    return x;
  }
};

const unit = checkState();
const h1 = d.querySelector("h1");
h1.innerHTML = `The current unit is: ${unit}`;

CodePudding user response：

You can make a control function like this

var fahrenheit = 0;
        var celsius = 0;

        document.getElementById("fahrenheit").addEventListener("click", function(){
            fahrenheit = 1;
            celsius = 0;
            control();
            return fahrenheit, celsius
        })
        document.getElementById("celsius").addEventListener("click", function(){
            fahrenheit = 0;
            celsius = 1;
            control();
            return fahrenheit, celsius
        })
        function control(){
            if (fahrenheit == 1) {
            document.getElementById("text").innerHTML ="fahrenheit";
                
            }
            if (celsius == 1) {
            document.getElementById("text").innerHTML ="celsius";
                
            }

        }

 <h1 id="text"></h1>
    <input type="radio" id="fahrenheit">
    <input type="radio" id="celsius">

CodePudding user response：

You can use addEventListener to listen for change event which gets fired when value of <input> changes.

const d = document;
const F = d.querySelector("#fahrenheit");
const C = d.querySelector("#celsius");

const checkState = () => {
  if (F.checked === true) {
    x = "fahrenheit";
    return x;
  }
  if (C.checked === true) {
    x = "celsius";
    return x;
  }
};

function check() {
  const unit = checkState();
  const h1 = d.querySelector("h1");
  h1.innerHTML = `The current unit is: ${unit}`;

}

check();

[F, C].forEach(e => e.addEventListener("change", check));

<div >
  <input type="radio"  id="celsius" name="unit" checked="checked">
  <label for="celsius" >° C</label>
  <input type="radio"  id="fahrenheit" name="unit">
  <label for="fahrenheit" >° F</label>
</div>
<h1></h1>

CodePudding user response：

input elements have a dedicated onchange attribute.
It's essentially a shorther way of adding an event listener for change events.
It will run a callback whenever the input value changes.

Since we already have the name value as the input's id, we can use that to update the h1 text accordingly.

Example:

function onChange(event) {
   const selectedUnit = event.id;
   updateHeaderText(selectedUnit);
}

function updateHeaderText(selectedUnit = "celsius") {
   const header = document.querySelector("h1");
   header.innerHTML = `The current unit is: ${selectedUnit}`;   
}

updateHeaderText();

<div >
      <input type="radio"  id="celsius" onchange="onChange(this)" name="unit" checked="checked">
      <label for="celsius" >° C</label>
      <input type="radio"  id="fahrenheit" onchange="onChange(this)" name="unit">
      <label for="fahrenheit" >° F</label>
</div>
<h1></h1>