javascript não muda a porcentagem em tempo real

Home › Fóruns › PHP/MYSQL › javascript não muda a porcentagem em tempo real

Visualizando 2 respostas da discussão
  • Autor
    Posts
    • 28 de agosto de 2023 às 01:25 #122268
      Filipe Pinto Vicentini
      Participante

      Olá, o javascipt não está mudando o resultado da porcentagem no desafio 11 de PHP moderno

      <!DOCTYPE html>
      <html lang=”pt-br”>
      <head>
      <meta charset=”UTF-8″>
      <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
      <title>Reajustes de preços</title>
      <link rel=”stylesheet” href=”estilo011.css”>
      </head>
      <body>
      <header>
      <h1>Reajustes de preços</h1>
      </header>
      <main>
      <section>
      <?php
      $produto = $_GET[‘produto’] ?? 10;
      $porcentagem = $_GET[‘aumento’] ?? 50;
      $aumento = $produto + $produto*$porcentagem/100;
      ?>
      <form action=”<?=$_SERVER[‘PHP_SELF’]?>” method=”get”>
      <label for=”produto”>Preço do produto? (R$)</label>
      <input type=”number” name=”produto” id=”produto” step=”0.01″ value=”<?=$produto?>”>
      <label for=”aumento”>Qual é o percentual de reajuste? (<span id=”p”>?</span>%)</label>
      <input type=”range” name=”aumento” id=”aumento” value=”<?=$porcentagem ?? 50?>”>
      <input type=”submit” value=”Calcular” id=”submit” oninput=”mudar()”>
      </form>

      <h2>Resultado final</h2>
      <p>O produto que custava R$<?=number_format($produto, 2, “,”, “.”)?>, com <?=$porcentagem?>% de aumento, passará a valer R$<?=number_format($aumento, 2, “,”, “.”)?></p>
      </section>
      </main>
      <script>
      function mudar(){
      p.innerText = porcentagem.value;
      }
      </script>
      </body>
      </html>

    • 28 de agosto de 2023 às 18:59 #122314
      Tutora Jessica
      Moderador

      Ola Filipe,
      o seu oninput=”mudar()” esta no lugar errado, ele precisa estar dentro do type=”range”, e a sua function mudar(), precisa receber o nome do input do tipo “range” , dessa forma:

      <!DOCTYPE html>
<html lang="pt-br">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Reajustes de preços</title>
    <link rel="stylesheet" href="estilo011.css">
</head>

<body>
    <header>
        <h1>Reajustes de preços</h1>
    </header>
    <main>
        <section>
            <?php
            $produto = $_GET['produto'] ?? 10;
            $porcentagem = $_GET['aumento'] ?? 50;
            $aumento = $produto + $produto * $porcentagem / 100;
            ?>
            <form action="<?= $_SERVER['PHP_SELF'] ?>" method="get">
                <label for="produto">Preço do produto? (R$)</label>
                <input type="number" name="produto" id="produto" step="0.01" value="<?= $produto ?>">
                <label for="aumento">Qual é o percentual de reajuste? (<span id="p">?</span>%)</label>
                <input type="range" name="aumento" id="aumento" value="<?= $porcentagem ?? 50 ?>" oninput="mudar()">
                <input type="submit" value="Calcular" id="submit" >
            </form>

            <h2>Resultado final</h2>
            <p>O produto que custava R$
                <?= number_format($produto, 2, ", ", " . ") ?>, com
                <?= $porcentagem ?>% de aumento, passará a valer R$
                <?= number_format($aumento, 2, ", ", " . ") ?>
            </p>
        </section>
    </main>
    <script>
    
        function mudar() {
            p.innerText = aumento.value;
        }
    </script>
</body>

</html>

      Após terminar seu desafio, veja as explicações dadas do professor Guanabara quanto a atenção da ordem do código. Isso irá lhe ajudar bastante.
      Bons estudos 🖖🏻

    • 29 de agosto de 2023 às 00:40 #122322
      Filipe Pinto Vicentini
      Participante

      Resolvido

  • Autor
    Posts
Visualizando 2 respostas da discussão
  • Você deve fazer login para responder a este tópico.