0

tengo un input con dos botones uno de incrementer y otro de decrementer, quiero que cuando el usuario pulse uno de ellos aparezca en un segundo input el resultado multiplicado por 12. este es mi código.

<div class="app">
   <center>
    <center><h1>Helados</h1></center>
    <form action="">
       <div>
        <p> bubulubu </p>
        <input type="button" value="+" id="btnIncrementer" onclick="incrementer()">
           <input  id="counter" value="0"/>
           <input type="button" value="-" id="btnDecrementer" onclick="decrementer()">
           <input id="valor" value="" />"
       </div>
       <script>

           function total(){
           var num1= parseInt(document.getElementById("counter").value);
           var num2= parseInt(document.getElementById("valor").value);
           var total=  num1*num2;
           document.forms.resultado.value=total;
           }
           
           
           function incrementer(){
              var i= document.getElementById("counter");
              i.value++;
              
              
              
              
           }
           function decrementer(){
              var i= document.getElementById("counter");
              i.value--;
        </script>
1
  • Puedes hacerlo con templates strings o con la propiedad de js createElement() esto al reaccionar a un evento
    – Christian
    Commented el 15 may. 2021 a las 15:16

1 respuesta 1

0

Hola Adrián: Primero que nada, deberías definir una constante en tu script para no repetir document.getElementById("counter") cada vez que lo quieras usar, tal que así:

const counter = document.getElementById("counter");

Por otro lado, no entendí por que el valor multiplicado por 12 debería aparecer en un input, ya que sería algo que el usuario no debería cambiar. Por lo tanto, podrías agregarlo a otro div mediante los métodos document.createElement() y appendChild()

A continuación te dejo el ejemplo para este caso: Agregué un div con la id "valores" en el cual apareceran los valores multiplicados por 12, y un input con type button, el cual será el responsable de multiplicar los valores por 12:

Así quedaría el div que tu hiciste

             <div>
             <p> bubulubu </p>
             <input type="button" value="+" id="btnIncrementer" onclick="incrementar()">
                <input  id="counter" value="0"/>
                <input type="button" value="-" id="btnDecrementer" onclick="decrementar()">
                <input type="button" onclick="multiply()" value="Multiplicar por 12">
                <div id="valores"></div>
            </div>

El botón llama una función que le puse el nombre de "multiply()", la cual es la siguiente:

const div = document.getElementById("valores");

function multiply() {

    const valorMultiplicado = counter.value * 12
    const p = document.createElement("p"); //Se crea un párrafo
    p.textContent = valorMultiplicado; //Se le da contenido al párrafo creado
    div.appendChild(p); //Se agrega el párrafo al div
}

Por último, si quieres hacer que solo aparezca el último valor multiplicado por 12, podrías hacer algo así:

var verificador = null;

function multiply() {

    if (verificador != null) {
        div.removeChild(verificador)
    }

    const valorMultiplicado = counter.value * 12
    const p = document.createElement("p");
    p.textContent = valorMultiplicado;
    verificador = p;
    div.appendChild(p);
}

Saludos!

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.