Receive value from an input and display it without updating the page

Question

Receive value from an input and display it without updating the page

Navigation

#1 by (2 votes)
#2 by (0 votes)

1

I have a problem, I am receiving a value of an input and I am showing it, the problem is that every time I make the query the page is updated and I do not want the page to be updated every time I make this query, which could do?

 <form action="" class="d-flex justify-content-center flex-column">
                <label for="">Monto a tomar</label>
                <input id="inputFuerte" type="number">
                <br>
                <button id="boton">Convertir</button>
                <br>
                <label for="">Monto a mostrar</label>
                <div id="txt"></div>
            </form>

Javascript

        //BsF    
    var montoRecibido = document.getElementById("inputFuerte").value;
   //Bs.S
   var montoMostrar = document.getElementById("inputSoberano");
   //boton
    var boton = document.getElementById("boton");
   //funcion
   function recibir(){
    bsF = document.getElementById("inputFuerte").value;  
    document.getElementById("txt").innerHTML=bsF;
   }

   boton.addEventListener("click", recibir);

javascript

asked by Victor Escalona 21.08.2018 в 03:16

source

2 answers

How to make my button do not lose functionality after adding it with append in jquery Problem with array in PHP

score 2 · Answer 1

Unless you are going to send information to the server, the <form> and </form> tags are not necessary, you can do it perfectly without them.

       //BsF    
    var montoRecibido = document.getElementById("inputFuerte").value;
   //Bs.S
   var montoMostrar = document.getElementById("inputSoberano");
   //boton
    var boton = document.getElementById("boton");
   //funcion
   function recibir(){
    bsF = document.getElementById("inputFuerte").value;  
    document.getElementById("txt").innerHTML=bsF;
   }

   boton.addEventListener("click", recibir);

<div class="d-flex justify-content-center flex-column">
    <label for="">Monto a tomar</label>
    <input id="inputFuerte" type="number">
    <br>
    <button id="boton">Convertir</button>
    <br>
    <label for="">Monto a mostrar</label>
    <div id="txt"></div>
</div>

score 0 · Answer 2

first there is a variable that you are creating from an element that you do not have in the html, which is the variable amountShow, you call by id to inputsoberano but there is nothing called that. second, for what you try to do test putting:

   //BsF    
var montoRecibido = document.getElementById("inputFuerte").valueAsNumber;
//Bs.S
var montoMostrar = document.getElementById("inputSoberano");
//boton
 var boton = document.getElementById("boton");
//funcion
function recibir(e){

// esto previene que la pagina se recargue
e.preventDefault();
//


bsF = document.getElementById("inputFuerte").value;  
document.getElementById("txt").innerHTML= bsF;
}

boton.addEventListener("click", recibir);

 <form action="" class="d-flex justify-content-center flex-column">
                <label for="">Monto a tomar</label>
                <input id="inputFuerte" type="number">
                <br>
                <button id="boton">Convertir</button>
                <br>
                <label for="">Monto a mostrar</label>
                <div id="txt"></div>
            </form>


<!-- begin snippet: js hide: false console: true babel: false -->