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>>Solution :
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.