Change a value depending on the Radio button

Question

I wanted your help on a question / problem I have.

I am making a quote calculator.

What he does is enter an amount and then he throws you the discount you are going to get.

The problem I have is that I have 2 radio buttons and those have different value (one is 99%, the other 98%).

Then, in a specific way to qualify, the discount that it throws has to be made differently.

   <input id="valor" type="text" onkeyUp="calcular();">

This input is to enter the amount

 <label for="">Casa</label>
    <input type="radio" name="r" value="99" id="">
    <label for="">Negocio</label>
    <input type="radio" name="r" value="98" id="">



<span id="total"></span>

Here you throw the discount.

var valor = document.getElementById("valor").value;

var result= document.getElementById('result');
var descuento = parseInt(valor)*0.90;

Here I make the formula for the discount but this is where I don't know how to spend the value depending on which checkbox.

//Add the result to the DOM
result.innerHTML = 'Ahorro de: $' + descuento;

Answer 1

    <label for="">Casa</label>
    <input type="radio" name="r" value="99" id="" onclick="check(99)">
    <label for="">Negocio</label>
    <input type="radio" name="r" value="98" id="" onclick="check(98)">
<span id="total"></span>

<script>
function check(percentage){
    console.log(percentage)
        var valor = document.getElementById("valor").value;
        var result= document.getElementById('total');
        var descuento = parseInt(valor)*percentage/100;
        result.innerHTML = 'Ahorro de: $' + descuento;
}
</script>

You can try this.

Answer 2

 let valor = document.getElementById("valor"); let result = document.getElementById('total'); let calcular = () => { var radVal = parseInt(document.querySelector(".ab:checked").value); var descuento = parseInt(valor.value) * radVal / 100; result.innerHTML = 'Ahorro de: $' + descuento; }

 This input is to enter the amount: <input id="valor" type="text" onkeyUp="calcular();"> <label for="a">Casa</label> <input type="radio" name="r" value="99" id="a" class="ab" checked onChange="calcular();"> <label for="b">Negocio</label> <input type="radio" name="r" value="98" id="b" class="ab" onChange="calcular();"> <input id="calc" type="submit" value="calc"> <span id="total"></span>

Answer 3

Maybe Like this:

 function calk(){ var r_val = document.querySelectorAll("[name='r']:checked")[0].value; r_val = parseInt(r_val, 10); var descuento = r_val*0.90; document.getElementById("total").innerHTML = 'Ahorro de: $' + descuento.toFixed(2); } var r_els = document.querySelectorAll("[name='r']"); for (var i = 0; i < r_els.length; i++) { r_els[i].addEventListener("click", function() { calk(); }); }

 <label for="">Casa <input type="radio" name="r" value="99" /> </label> <label for="">Negocio <input type="radio" name="r" value="98" /> </label></br> <span id="total"></span>