es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Obtén el valor de una entrada en tiempo real.

30 Jul, 2023 Programación

Estoy tratando de obtener el valor de un input en tiempo real pero no puedo obtenerlo.

Estoy tratando de que en el botón de abajo, la primera X sea la cantidad de zanahorias especificada en el input de arriba, y en la segunda X sea un número que se calculará en un script, todo en tiempo real (si el número del input cambia, los de abajo cambiarán automáticamente). Pero para eso necesito una manera de obtener el valor del input en tiempo real.

Aquí está el código, estoy usando express-handlebars y Bootstrap para los estilos y clases.

<div class="col-md-auto mx-auto">
   <h3 class="text-center">Comprar</h3>
   <form action="/dashboard/" method="POST">
      <div class="form-group">
         <input type="number" id="buyA" min="3" class="form-control" name="buyA" placeholder="Cantidad">
         <div class="d-grid gap-2">
            <button class="btn btn-success">Comprar X cosas X</button>
         </div>
      </div>
      <input type="hidden" id="buy" name="buy" value="compra">
   </form>
</div>

Uno de los scripts que he intentado es el siguiente, pero no muestra nada y simplemente lo coloqué en lugar de la X (soy un poco novato en HTML), es decir, en lugar de la X simplemente puse ese script con la esperanza de obtener su valor.

<script>
   let buyAmount = document.getElementById('buyFormAmount').value;
   if (!buyAmount || buyAmount <= 0) buyAmount = "?";
   return buyAmount;
</script>
Tags:  , , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para obtener el valor de una entrada en tiempo real, puedes utilizar un escucha de eventos que detecte los cambios en el elemento de entrada. En el código HTML proporcionado, puedes agregar un atributo oninput al elemento de entrada que llame a una función de JavaScript para actualizar los valores de las X en tiempo real. Aquí tienes un ejemplo:

    <div class="col-md-auto mx-auto">
   <h3 class="text-center">Comprar</h3>
   <form action="/dashboard/" method="POST">
      <div class="form-group">
         <input type="number" id="buyA" min="3" class="form-control" name="buyA" placeholder="Cantidad" oninput="updateValues()">
         <div class="d-grid gap-2">
            <button class="btn btn-success">Comprar <span id="carrotAmount">X</span> Cosas <span id="calculatedValue">X</span></button>
         </div>
      </div>
      <input type="hidden" id="buy" name="buy" value="buy">
   </form>
</div>

<script>
    function updateValues() {
        let buyAmount = document.getElementById('buyA').value;
        if (buyAmount <= 0) {
            buyAmount = '?';
        }
        let calculatedValue = /* tu cálculo */;
        document.getElementById('carrotAmount').textContent = buyAmount;
        document.getElementById('calculatedValue').textContent = calculatedValue;
    }
</script>

    En este ejemplo, el atributo oninput del elemento de entrada llama a la función updateValues() cada vez que cambia el valor de entrada. La función obtiene el valor del elemento de entrada utilizando document.getElementById('buyA').value y realiza el cálculo necesario para actualizar calculatedValue. Luego, establece el contenido de texto de los elementos span carrotAmount y calculatedValue en los valores actualizados utilizando document.getElementById().textContent.

Comments are closed.