i got a container with 3 radionbuttons and 2 of the radiobuttons have another radiobuttons next to them but their displays are none . When i click the radiobutton i wanna display the hidden radiobuttons and when i click another radionbutton i want it's display to be none again .
`function showHiddenText()
{
if (document.getElementById("diger").checked) {
const hiddenInput = document.getElementById("hidden-input");
hiddenInput.style.display = "block";
} else if (document.getElementById("diger").checked == false) {
hiddenInput.style.display = "none";
}
}`
It's a simple function i write to do that but else if part is not working . When i display hidden radio buttons they dont disappear ever again. radionbuttons hiddenpart
const variables are block scoped. So, in the else if statement hiddenInput is undefined.
Move it above the statements
function showHiddenText()
{
const hiddenInput = document.getElementById("hidden-input");
if (document.getElementById("diger").checked) {
hiddenInput.style.display = "block";
} else if (document.getElementById("diger").checked == false) {
hiddenInput.style.display = "none";
}
}
By the way, you can make it simpler by replacing the else if statement with else:
function showHiddenText()
{
const hiddenInput = document.getElementById("hidden-input");
if (document.getElementById("diger").checked) {
hiddenInput.style.display = "block";
} else {
hiddenInput.style.display = "none";
}
}
Or even more:
function showHiddenText()
{
const hiddenInput = document.getElementById("hidden-input");
if (document.getElementById("diger").checked) {
hiddenInput.style.display = "block";
return true; // you can return anything here
}
hiddenInput.style.display = "none";
return false; // and here (it is not necessary to return here)
}
Make sure your radio buttons have the same name. Radio buttons with same name are compared to each other. Add onclick="showHiddenText()" to inputs, then:
html:
<input type="radio" name="btn" id="diger" onclick="showHiddenText()">
<input type="radio" name="btn" onclick="showHiddenText()">
<input type="radio" id="hidden-input">
js:
function showHiddenText() {
if (document.getElementById("diger").checked) {
document.getElementById("hidden-input").style.display = 'block'
}
else{
document.getElementById("hidden-input").style.display = 'none'
}
}