Take 2 values of 2 inputs and add

Question

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>

  

Answer 1

As you were setting the variables before pressing the calculate button, they were "calculated" as soon as the page loaded, always resulting in 0 both. Just move the two lines that define x and y into the EventListener, that will be working.

And yes, the numbers can be comma. Follow example working below.

var calcular = document.getElementById('btn_cal');
calcular.addEventListener('click', function() {
  var x = Number(document.getElementById('x').value); // movidas para dentro do event listener
  var y = Number(document.getElementById('y').value); // movidas para dentro do event listener

  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>