Hidden input when the radio button is changed does not work-CodePudding

I have three radio buttons;

when I click on the first I want the inputs of the other two not to be visible;
when I click on the second I want the input of the third not to be visible (the first has no input)
when I click on the third I want the second input (ie the one related to the second radio button) not visible.

The code I wrote does not work well; when I click on the first radio button it only hides the input of the third radio button but not the second one as well. Also when I click on the third, the input of the second radio button does not disappear.

<div id="fieldinput" >
                    <label for="discount" >Sconto</label>
                    <div >
                        <input  type="radio" name="discount" id="flexRadioNoDisconunt" value="nodiscount" checked onclick="showinputfield(value);">
                        <label  for="flexRadioNoDisconunt"> No discount </label>
                    </div>
                    <div >
                        <input  type="radio" name="discount" id="flexRadioRelativeDisconunt" value="relativediscount" onclick="showinputfield(value);">
                        <label  for="flexRadioRelativeDisconunt"> Relative Disconunt in %</label>
                        <input type="number"  name="" value="">                    
                    </div>
                    <div >
                        <input  type="radio" name="discount" id="flexRadioAbsoluteDisconunt" value="absolutediscount" onclick="showinputfield(value);">
                        <label  for="flexRadioAbsoluteDisconunt"> Absolute Disconunt </label>
                        <input type="number"  name="" value="">
                    </div>  
                </div>

window.showinputfield = function (check) {
    let input = document.getElementById('fieldinput');
    if(check=="nodiscount"){        
        input.classList.add("visible");
    }
    else if(check=="relativediscount"){        
        input.classList.add("visible");
    }else {
        input.classList.remove("visible");
    }
}

.visible .inputrelativediscount{
    display: block;
}

.visible .inputabsolutediscount{
    display: none;
}

Can anyone kindly help me?

CodePudding user response：

Here I make this one for you.

<!DOCTYPE html>
<html>

    <style>
        .inputs{
            display: none;
        }
    </style>
<body>


    <div id="fieldinput" >
        <label for="discount" >Sconto</label>
        <div >
            <input  type="radio" name="discount" id="flexRadioNoDisconunt" value="nodiscount" checked onclick="showinputfield(value);">
            <label  for="flexRadioNoDisconunt"> No discount </label>
        </div>
        <div >
            <input  type="radio" name="discount" id="flexRadioRelativeDisconunt" value="relativediscount" onclick="showinputfield(value);">
            <label  for="flexRadioRelativeDisconunt"> Relative Disconunt in %</label>
            <input type="number" id="inputrelativediscount"  name="" value="">                    
        </div>
        <div >
            <input  type="radio" name="discount" id="flexRadioAbsoluteDisconunt" value="absolutediscount" onclick="showinputfield(value);">
            <label  for="flexRadioAbsoluteDisconunt"> Absolute Disconunt </label>
            <input type="number" id="inputabsolutediscount"  name="" value="">
        </div>  
    </div>

    <script>


function showinputfield(check){
    let noDiscount = document.getElementById("flexRadioNoDisconunt");
    let inputs = document.getElementsByClassName('inputs');
    let relativeDiscount = document.getElementById("inputrelativediscount");
    let absoluteDiscount = document.getElementById("inputabsolutediscount");
    if(check === "nodiscount"){
        relativeDiscount.style.display = 'none';
        absoluteDiscount.style.display = 'none';
    }
    else if(check === 'relativediscount'){
        relativeDiscount.style.display = 'block';
        absoluteDiscount.style.display = 'none';
        
    }
    else if(check === 'absolutediscount'){
        absoluteDiscount.style.display = 'block';
        relativeDiscount.style.display = 'none';

    }
}
    </script>
</body>
</html>