Using radio input and doing real-time operations with javascript

Asked

Viewed 348 times

0

About teaching, I want the beginner class to cost 20 per lesson and the advanced 40, differentiating using radio buton, and the amount of class with input type range, but I don’t know much about js and wanted this help, ae goes the code that I adapted from the internet but it only serves for beginner class because it does the amount of class times 20 and wanted that collected the variable of the radio and used in the place of the 20.

OBG

<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <meta charset="utf-8">
  </head>
  <body>
	<section>
      <h3>Escolha o pacote desejado</h3><hr>
        Iniciante<input type="radio" name="radio" id="iniciante" checked /><br>
        Avançado<input type="radio" name="radio" id="avancado" />
         <h4>Quantidade de Aulas:</h4>
         <input id="price" class="slider" type="range" min="1" max="30" value="1"/>
          <span id="resultado1" style="font-size: 25px;"></span>

      <h4>Total:</h4>
        <p id="resultado2">Preço: </p>
</section>
<script>

var p = document.getElementById("price"),
    res1 = document.getElementById("resultado1"),
    res2 = document.getElementById("resultado2");

p.addEventListener("input", function () {
    res1.innerHTML = p.value;
}, false);
p.addEventListener("mouseup", function () {
    res2.innerHTML = "Preço: " + p.value * 20 + ",00";
}, false);

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

javascript accountant real-time

  • Why don’t you use input type number? Or select?

  • I find the radiobutton more beautiful, sorry for the answer

  • Use method: var curso = (document.getElementById("iniciante").checked) ? 20 : 40;

2 answers

2

Hello I have full answer. Create a function that update the price.

<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <meta charset="utf-8">
  </head>
  <body>
    <section>
      <h3>Escolha o pacote desejado</h3><hr>
        Iniciante<input type="radio" name="radio" id="iniciante" checked /><br>
        Avançado<input type="radio" name="radio" id="avancado" />
         <h4>Quantidade de Aulas:</h4>
         <input id="price" class="slider" type="range" min="1" max="30" value="1"/>
          <span id="resultado1" style="font-size: 25px;"></span>

      <h4>Total:</h4>
        <p id="resultado2">Preço: </p>
</section>
<script>
// recebendo as ids em cada variable
var p = document.getElementById("price"),
    res1 = document.getElementById("resultado1"),
    res2 = document.getElementById("resultado2"),
    curso_iniciante = document.getElementById("iniciante"),
    curso_avancado = document.getElementById("avancado");

// Atualizar o preço
function update_price() {
     // verificar o valor do curso
    var curso = (curso_iniciante.checked) ? 20 
    : (curso_avancado.checked) ? 40 : null;
     // escrever no html
    res2.innerHTML = `Preço: ${p.value * curso},00R$`;
}

// eventos
p.addEventListener("input", function () {
    res1.innerHTML = p.value;
}, false);
p.addEventListener("mouseup", update_price, false);
curso_iniciante.addEventListener("click",update_price,false)
curso_avancado.addEventListener("click",update_price,false);
</script>
  </body>
</html>

  • thank you very much helped I don’t know how to thank you besides validate the good answer that you exist thank you so much

0


You can capture the element iniciante with getElementById just like you did with the other elements, and check if it is activated via property checked. In addition, you will also need to create events for these buttons, after all the total value needs to be recalculated not only when you change the amount of lessons, but also when you change the category.

<!DOCTYPE html>
<html>

<head>
  <title></title>
  <meta charset="utf-8">
</head>

<body>
  <section>
    <h3>Escolha o pacote desejado</h3>
    <hr>
    Iniciante<input type="radio" name="radio" id="iniciante" checked /><br>
    Avançado<input type="radio" name="radio" id="avancado" />
    <h4>Quantidade de Aulas:</h4>
    <input id="price" class="slider" type="range" min="1" max="30" value="1" />
    <span id="resultado1" style="font-size: 25px;"></span>

    <h4>Total:</h4>
    <p id="resultado2">Preço: </p>
  </section>
  <script>

    var elemIniciante = document.getElementById("iniciante");
    var elemAvancado = document.getElementById("avancado");
    var elemPrice = document.getElementById("price");
    var elemRes1 = document.getElementById("resultado1");
    var elemRes2 = document.getElementById("resultado2");

    elemIniciante.addEventListener("input", calcularPreco);
    elemAvancado.addEventListener("input", calcularPreco);
    elemPrice.addEventListener("input", calcularPreco);
    
    function calcularPreco() {
      var multiplicador = elemIniciante.checked ? 20 : 40;

      elemRes1.innerHTML = elemPrice.value;
      elemRes2.innerHTML = "Preço: " + elemPrice.value * multiplicador + ",00";
    }

    calcularPreco();

  </script>
</body>

</html>

Note that in this code, instead of creating a function for each input, I declared a function in the scope and passed its reference to the eventListener.

  • thank you very much helped I don’t know how to thank you besides validate the good answer that you exist thank you so much

Browser other questions tagged javascript accountant real-time

You are not signed in. Login or sign up in order to post.