0

Sobre dar aulas, quero que a aula iniciante custe 20 por aula e a avançada 40, diferenciando usando radio buton, e a quantidade de aula com input type range, mas não entendo muito de js e queria essa ajuda, ae vai o codigo que adaptei da internet mas ele só serve para aula iniciante pois faz a quantidade de aula vezes 20 e queria que coletasse a variavel do radio e usasse no lugar do 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>

3
  • Porque você não usar input type number? Ou select? 20/07/2019 às 2:35
  • acho o radiobutton mais bonito, desculpa pela resposta
    – Vinicius
    20/07/2019 às 2:57
  • Usar método: var curso = (document.getElementById("iniciante").checked) ? 20 : 40; 20/07/2019 às 3:36

2 Respostas 2

2

Olá eu tenho resposta completa. Criar uma função que atualizar o preço.

<!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>
1
  • muito obrigado ajudou muito não sei como agradecer alem de validar a resposta que bom que você existe muito obrigado
    – Vinicius
    20/07/2019 às 13:31
0

Você pode capturar o elemento iniciante com getElementById assim como você fez com os demais elementos, e verificar se ele está ativado via propriedade checked. Além disso, você também vai precisar criar eventos para esses botões, afinal o valor total precisa ser recalculado não apenas quando você altera a quantidade de aulas, mas também quando você muda a categoria.

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

Repare que nesse código, ao invés de criar uma função para cada input, eu declarei uma função no escopo e passei a referência dela para o eventListener.

1
  • muito obrigado ajudou muito não sei como agradecer alem de validar a resposta que bom que você existe muito obrigado
    – Vinicius
    20/07/2019 às 13:31

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .