CODEWITHSUNDEEP
javascript
Luis Uribe
Luis Uribe

Reputation: 21

Change a value depending on the Radio button

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;

Upvotes: 1

Views: 76

Answers (3)

mscdeveloper
mscdeveloper

Reputation: 2889

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>

Upvotes: 0

Merci Dieu KIMPOLO
Merci Dieu KIMPOLO

Reputation: 443

    <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.

Upvotes: 1

symlink
symlink

Reputation: 12209

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>

Upvotes: 1

Related Questions