0
I would like to know what I’m missing! Besides the numbers can be with comma or without. I wonder how to solve these two problems.
var x = Number(document.getElementById('x').value);
var y = Number(document.getElementById('y').value);
var calcular = document.getElementById('btn_cal');
calcular.addEventListener('click', function() {
var res = x + y;
alert(`Soma de ${x} + ${y} = ${res}`);
document.getElementById('resultado').innerHTML = res;
});
.box {
left: 50%;
transform: translateX(-50%);
top: 220px;
width: 280px;
position: absolute;
}
.input-container , button {
position: relative;
font-family: 'Cardo', serif;
margin-bottom: 25px;
}
.input-container label{
position: absolute;
top: 0px;
left: 0px;
font-size: 0.9rem;
color: var(--cor-text);
transition: all 0.5s ease-in-out;
}
.input-container input{
border: 0;
border-bottom: 1px solid #555;
background: transparent;
width: 100%;
padding: 8px 0 5px 0;
font-size: 1rem;
color: var(--cor-text);
}
.input-container input:focus{
border: none;
outline: none;
border-bottom: 1px solid var(--cor-efeito);
}
.input-container input:focus ~ label,
.input-container input:valid ~ label{
top: -12px;
color: var(--cor-text-input-focus);
}
.box button {
left: 50%;
transform: translateX(-50%);
border: 0;
width: 90px;
height: 25px;
padding: 2px;
font-size: 1rem;
transition: 0.5s;
border-radius: 8px;
padding-bottom: 6px;
letter-spacing: 0.5px;
color: var(--cor-text);
font-family: 'Bebas Neue', cursive;
background-color: var(--cor-principal);
}
.box button:hover {
border: 1px solid var(--cor-efeito);
}
.box button i {
font-size: 14px;
padding-right: 5px;
}
<div class="box">
<div class="input-container">
<input id="x" type="number" required=""/>
<label>INSIRA O PRIMEIRO VALOR</label>
</div>
<div class="input-container">
<input id="y" type="number" required=""/>
<label>INSIRA O SEGUNDO VALOR</label>
</div>
<button id="btn_cal" type="submit">CALCULAR</button>
<div class="input-container">
<input id="resultado" style="border-bottom: 1px solid var(--cor-efeito);" type="text" required="" disabled/>
<label>RESULTADO</label>
</div>
</div>
The statements of
x
andy
should not fall within the scope ofaddEventListenter
?– Cmte Cardeal