How to make function execute after radio option is clicked? JavaScript-CodePudding

I am wondering how I can make a function execute such as making a text box appear when "Yes" option is clicked. How can I do this as the Yes is part of a radio input type in JS? I prefer an answer in vanilla javascript. It would help a lot! Thank You!

JavaScript

    document.querySelector("label[for=ediet]").style.opacity = "100%"; //RIGHT
    document.getElementById("edietq").style.opacity = "100%";
}



function init( ) {
    var f = document.getElementsByName("form1");
    f[0].addEventListener("submit", validateForm); 
    
    var yes =  document.querySelector("label[for=ediet]");
    yes.addEventListener("click", yesClicked);
    var showT = document.getElementById("edietq");
    showT.addEventListener("click", yesClicked);

}
window.onload = init; ```

**HTML**

<input type="radio" id="yes" name="option">

<label for="yes" id="yesq" value = "option">Yes</label><br><br>
<input type="radio" id="no" name="option">
<label for="No">No</label><br><br>
<label for="ediet">If yes, explain your dietary restrictions</label><br> 
<input type="text" id="edietq" name="edietq"><br><br> <!-- Explain Diet-->

CodePudding user response：

You can create a class that the display is none

.hide{
  display: none
}

Leave pre added in the input to be hidden

<input type="text" id="edietText"  name="edietq">

And make a function that removes this class

const yesInput = document.getElementById("yes")

yesInput.addEventListener("click", yesClicked);

function yesClicked(){
  let textExp = document.getElementById("edietText");
  textExp.classList.remove('hide');
}

And you can do something like this too:

const yesInput = document.getElementById("yes");
const noInput = document.getElementById("no");
const textExp = document.getElementById("edietText");

yesInput.addEventListener("click", yesClicked);

noInput.addEventListener("click", noClicked);

function yesClicked(){
  textExp.classList.remove('hide');
}
function noClicked(){
  textExp.classList.add('hide');
}

const yesInput = document.getElementById("yes");
const noInput = document.getElementById("no");
const textExp = document.getElementById("edietText");

yesInput.addEventListener("click", yesClicked);

noInput.addEventListener("click", noClicked);

function yesClicked(){
  textExp.classList.remove('hide');
}
function noClicked(){
  textExp.classList.add('hide');
}

.hide{
  display: none
}

<input type="radio" id="yes" name="option">

<label for="yes" id="yesq" value = "option">Yes</label>
<br><br>
<input type="radio" id="no" name="option">
<label for="no">No</label><br><br>
<label for="ediet">If yes, explain your dietary restrictions</label><br> 
  <input type="text" id="edietText"  name="edietq">
<br><br> <!-- Explain Diet-->

CodePudding user response：

Use the onclick event listener as shown below:

document.getElementById("dark").addEventListener("click", (e) => {
  console.log(e.target.id)
  document.body.style.background = "black"
  document.body.style.color = "white"
});

document.getElementById("light").addEventListener("click", (e) => {
  console.log(e.target.id)
  document.body.style.background = "white"
  document.body.style.color = "black"
});

<label>Toggle Dark Mode</label>
<input type="radio" name="theme" id="dark" />

<label>Toggle Light Mode</label>
<input type="radio" name="theme" id="light" />

Adjust the code to suit your usecase.