estoy tratando de crear un formulario simple, para realizar coversiones de moneda, quiero que cuando se haga click en el botón convertir y si el el primer input tiene un value igual o menor a 0 o null se muestre una alerta.
Cree el div y un p adentro con el texto de la alerta, ahora esta solo se creará cuando se haga click en el botón, sin embargo al hacer click sobre el botón se crearan muchas mas alertas sin control alguno
como podría limitar la cantidad de alertas que se crean al hacer click, debería crear un ciclo for o algo así?
Gracias por la ayuda.
var trm = document.querySelector("#trm");
var amount = document.querySelector("#amount");
var select_exchange = document.querySelector("#select-exchange");
var exchage_to = document.querySelector("#exchange-to");
var btn_convert = document.querySelector("#btn-convert");
//getting Values
//---------------------------------------------------
window.addEventListener("load", function(){
var exchage_value = select_exchange.value;
if(exchage_value == "usd"){
exchage_to.innerHTML = "Cop"
}
});
select_exchange.addEventListener("change", function(){
var exchage_value = select_exchange.value;
if(exchage_value == "usd"){
exchage_to.innerHTML = "Cop"
}else{
exchage_to.innerHTML = "Usd"
}
});
//---------------------------------------------------
btn_convert.addEventListener("click", function(){
trm_value = trm.value;
if(trm_value == null || trm_value <= 0){
var alert_exchange = document.createElement("div");
alert_exchange.setAttribute("class", "alert-exchange");
alert_exchange.innerHTML = '<p>Por favor introduce el valor del trm</p>';
trm.after(alert_exchange);
}else{
var alert_exchange_hide = document.querySelector(".alert-exchange");
alert_exchange_hide.style.display = "none"
}
});
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
max-width: 900px;
border: 1px solid rgba(0, 0, 0, 0.3);
margin: auto;
margin-top: 50px;
padding: 50px;
}
.convert {
margin-bottom: 10px;
padding: 10px;
width: 100%;
display: block;
}
select {
padding: 10px 20px;
margin-bottom: 20px;
}
h3 {
margin-bottom: 20px;
}
h4 {
display: inline-block;
padding-right: 20px;
}
h4:nth-of-type(2){
padding-left: 20px;
}
#btn-convert {
padding: 10px;
}
#btn-convert:hover {
box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4);
transition: 0.1s;
}
#answear h4 {
display: block;
text-align: left;
font-weight: 800;
font-size: 2rem;
padding: 0;
margin-top: 30px;
}
/*==================================
ALERTS
====================================*/
.alert-exchange {
margin-bottom: 10px;
background: rgba(255, 0, 0, .5);
padding: 10px 10px;
color: #ffffff;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="css/styles.css">
<title>Document</title>
</head>
<body>
<div class="container">
<h3>Seleccione la moneda a convertir</h3>
<h4>De</h4>
<select name="select" id="select-exchange">
<option value="usd" selected>Usd</option>
<option value="cop">Cop</option>
</select>
<h4>a</h4>
<h4 id="exchange-to"></h4>
<button id="btn-convert">Convertir</button>
<input type="number" id="trm" class="convert" placeholder="Ingrese el TRM">
<input type="number" id="amount" class="convert" placeholder="Ingrese la cantidad a convertir">
<div id="answear">
<h4>El valor en dolares es:</h4>
<h4>El valor en pesos es:</h4>
</div>
<script src="js/script.js"></script>
</body>
</html>