After change input value it disappear immediately

Question

I am trying to change the text content or the value of a text input, So I added an event to write "hello" on a text input, it works, the problem is it disappear immediately and the text input change to empty.

var monto_cliente = document.querySelector("#Monto_cliente");
var monto_caja = document.querySelector("#Monto_caja");
var btn_calc = document.querySelector("#btn_calc");
var tasa_dia = document.querySelector("#tasa_dia");
var select_tipo_cambio = document.querySelector("#Tipo_cambio");


btn_calc.addEventListener("click", () => monto_cliente.value = "hello");

<HTML>
<HEAD>
<title>Cambio de Dolares</title>
</HEAD>
<BODY>
    <form>
        <label for="Tipo_cambio">Seleccione el tipo de cambio: </label><br>
        <select name="Tipo_cambio" id="Tipo_cambio">
          <option>Dolares a Pesos</option>
          <option>Pesos a Dolares</option>
        </select>
        <label for="Tasa_dia">Digite la Tasa del dia</label>
        <input type="text" id="Tasa_dia">
        <label for="Monto_cliente">Monto Que tiene que dar el cliente</label>
        <input type="text" id="Monto_cliente">
        <label for="Monto_caja">Monto Que hay que darle al cliente</label>
        <input type="text" id="Monto_caja">
        <button id="btn_calc">Calcular</button>
      </form>
      


<script src="main.js"></script>
</BODY>
</HTML>

Because you're submitting the `
` I imagine; try `
– David Thomas Apr 05 '22 at 15:37 — David Thomas, Apr 05 '22 at 15:37

Carsten Massmann · Accepted Answer · 2022-04-05T15:52:09.870

0

As the default button type for most browsers is "submit" your form is submitted immediately after clicking the button. So, in order to avoid that from happening you could call ev.preventDefault() in your click event handler. Alternatively you could set the type to button in your button element.

edited Apr 05 '22 at 15:52

answered Apr 05 '22 at 15:45

Carsten Massmann

26,510
2
22
43

This is the same answer as we have on thousands of questions like this. Please vote to close as a duplicate instead of answering. – Heretic Monkey Apr 05 '22 at 15:51
I agree with you! :D - unfortunately I cannot delete it any more, as it is now the "accepted answer" ... :-( – Carsten Massmann Apr 05 '22 at 15:52

score 0 · Answer 2 · answered Apr 05 '22 at 15:48

Form gets submitted When you press button. Either remove the form tag or change your button type to button:

var monto_cliente = document.querySelector("#Monto_cliente");
var monto_caja = document.querySelector("#Monto_caja");
var btn_calc = document.querySelector("#btn_calc");
var tasa_dia = document.querySelector("#tasa_dia");
var select_tipo_cambio = document.querySelector("#Tipo_cambio");


btn_calc.addEventListener("click", () => monto_cliente.value = "hello");

<HTML>
<HEAD>
<title>Cambio de Dolares</title>
</HEAD>
<BODY>
    <form>
        <label for="Tipo_cambio">Seleccione el tipo de cambio: </label><br>
        <select name="Tipo_cambio" id="Tipo_cambio">
          <option>Dolares a Pesos</option>
          <option>Pesos a Dolares</option>
        </select>
        <label for="Tasa_dia">Digite la Tasa del dia</label>
        <input type="text" id="Tasa_dia">
        <label for="Monto_cliente">Monto Que tiene que dar el cliente</label>
        <input type="text" id="Monto_cliente">
        <label for="Monto_caja">Monto Que hay que darle al cliente</label>
        <input type="text" id="Monto_caja">
        <button id="btn_calc" type="button">Calcular</button>
      </form>
      


<script src="main.js"></script>
</BODY>
</HTML>

This is the same answer as we have on thousands of questions like this. Please vote to close as a duplicate instead of answering. — Heretic Monkey, Apr 05 '22 at 15:51

After change input value it disappear immediately

2 Answers2