1

HTML y JS corría adecuadamente, pero al momento de intentar poner mas botones dejo de hacer la suma y de devolverme el resultado, he intentado revisar si mi sintaxis esta mal, si escribí algo mal pero nada, todo parece funcionar, pero cuando intento hacer que me devuelva el resultado no hace nada, no marca ningún error el navegador uso Brave y Edge, anteriormente en Brave corría normalmente hasta que intente poner mas inputs.

'use strict'
//Calculator
window.addEventListener('load', function(){
    console.log("JS cargado!!");
    //Add
    var form = document.querySelector("#form");
    console.log("form adquired");
    var result = document.querySelector(".result");
    console.log("result setup");
    result.style.display = "none";
    console.log("display none");
    form.addEventListener('add', function(){
      console.log("js activado");
      var num1 = Number(document.getElementById('box1').value);
      var num2 = Number(document.getElementById('box2').value);
      result.style.display = "block";
      var result1 = num1 + num2;
      var ans = document.createElement("p");
      ans.append(result1);
      result.append(ans);
    });
});
div.top {
  margin: 25px;
  border-color: black;
  border-style: solid;
  border-color: gray;
  background-color: #FFFFFF;
  padding: 50px;
}
body {
  background-color: #0b345a;
}
input {
  display: block;
}
HTML

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>JHB</title>
    <script type="text/javascript" src="main_cv.js"></script>
    <link rel="stylesheet" href="styles_cv.css">
  </head>
  <body>
    <div class="top">
      <form action="#" method="post" id="form" onsubmit="return false">
        <label>Enter Number 1 : </label>
        <input type="number" id="box1"/>
        <label>Enter Number 2 : </label>
        <input type="number" id="box2"/>
        <label>Result</label>
        <div class="result"></div>
        <input type="submit" value="Add" id="add"/>
      </form>
    </div>
  </body>
</html>

Agradezco las respuestas, si bien ya busque me urge pasar de este tipo de detalles ya que tengo que avanzar con urgencia, crean me que si busque pero en verdad no se como explicar mi pregunta en una búsqueda de Google. Por supuesto que realizo búsquedas pero este tipo de cosas son nuevas para mi.

Gracias por leer la pregunta y las respuestas de antemano.

2
  • Sólo para confirmar: en la consola del navegador no sale nada?
    – Alfabravo
    Commented el 18 ene. 2021 a las 0:45
  • Si, salen los console.log que tengo en el JS que precisamente los puse para comprobar que se esta ejecutando el JS. perdón no mencione eso
    – JHB990
    Commented el 18 ene. 2021 a las 0:51

1 respuesta 1

1

Tienes un error en el eventListener: El evento es submit y no add

Resultando tu código de esta manera:

'use strict'
//Calculator
window.addEventListener('load', function(){
    var form = document.querySelector("#form");
    var result = document.querySelector(".result");
    result.style.display = "none";
    form.addEventListener('submit', function(){
      var num1 = Number(document.getElementById('box1').value);
      var num2 = Number(document.getElementById('box2').value);
      result.style.display = "block";
      var result1 = num1 + num2;
      var ans = document.createElement("p");
      ans.append(result1);
      result.append(ans);
    });
});
div.top {
  margin: 25px;
  border-color: black;
  border-style: solid;
  border-color: gray;
  background-color: #FFFFFF;
  padding: 50px;
}
body {
  background-color: #0b345a;
}
input {
  display: block;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>JHB</title>
    <script type="text/javascript" src="main_cv.js"></script>
    <link rel="stylesheet" href="styles_cv.css">
  </head>
  <body>
    <div class="top">
      <form action="#" method="post" id="form" onsubmit="return false">
        <label>Enter Number 1 : </label>
        <input type="number" id="box1"/>
        <label>Enter Number 2 : </label>
        <input type="number" id="box2"/>
        <label>Result</label>
        <div class="result"></div>
        <input type="submit" value="Add" id="add"/>
      </form>
    </div>
  </body>
</html>

3
  • Entonces los EventListener toman el type del elemento no el id. lo puedo sintetizar de esa manera? Muchas gracias
    – JHB990
    Commented el 18 ene. 2021 a las 0:54
  • Es correcto, la sintaxis de un eventListener sería elemento.addEventListener("nombreListener", función) Referencia de eventos
    – Rodrigo
    Commented el 18 ene. 2021 a las 0:57
  • @JHB990, no es el tipo de elemento, sino el evento que deseas capturar. En tu caso, el botón hace que el formulario se procese, lanzando el evento submit. anythingg, esa referencia quedaría excelente como parte de la respuesta.
    – Triby
    Commented el 18 ene. 2021 a las 3:22

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.