Estoy tratando de hacer una página html simple con dos cajas de texto y un botón que suma los dos números juntos cuando se hace clic. En mi salida, estoy consiguiendo solamente [object HTMLInputElement].

JS:

function addNumbers(A, B){
  var answer = A + B;
  document.getElementById("testResult").innerHTML = answer;
}

HTML:

<input type="text" value="15" id="varA">
<input type="text" value="30" id="varB">
<input type="button" value="Add" onclick="addNumbers(varA, varB)">
<h1 id="testResult"></h1>

Cualquier ayuda se agradece. He intentado cambiar .innerHTML a .value ya, pero luego me sale nada como un resultado.

  • varA es el input elemento, no su valor, lo cual sería varA.value. Sin embargo, vas a tener que cambiar eso a un número antes de añadir juntos, o de lo contrario va a terminar con la concatenación de cadenas.
  • Nota input elementos no tienen contenido, así que usted puede utilizar <input ...> o <input ... />, pero no <input ...></input>.
InformationsquelleAutor Xfmym | 2014-10-05

2 Comentarios

  1. 2

    Supongo que usted quiere matemática de la suma y no la concatenación de cadenas. Si ese es el caso, puede utilizar el siguiente:

    De ACTUALIZACIÓN basado en el comentario:

    JS:

    function addNumbers(elem1, elem2) {
      var a = document.getElementById(elem1).value;
      var b = document.getElementById(elem2).value;
      var c = Number(a) + Number(b);
      document.getElementById("testResult").innerHTML = c;
    }

    HTML:

    <input type="text" value="15" id="varA">
    <input type="text" value="30" id="varB">
    <input type="button" value="Add" onclick="addNumbers('varA', 'varB')"></input>
    <h1 id="testResult"></h1>

    Aquí un trabajo de Violín: http://jsfiddle.net/JohnnyEstilles/ex09fx7k/.

    • Mientras que funciona, la addNumbers ya no es útil para otros tipos de elementos.
    • Entonces usted puede simplemente pasar los ids de los elementos como cadenas de caracteres para la función. He actualizado mi respuesta.
    • He actualizado el Violín también.
    • Hace que el trabajo para usted?
  2. 1

    Algunas correcciones:

    • Que son la suma de las entradas de los elementos, en vez de su value.
    • Para convertir su cadena de valor a un número, puede utilizar unario +.
    • En lugar de en línea de detectores de eventos, el mejor uso addEventListener.

    JS:

    var a = document.getElementById('varA'),
        b = document.getElementById('varB'),
        result = document.getElementById("testResult");
    
    document.getElementById('add').addEventListener('click', function() {
      addNumbers(a.value, b.value);
    });
    
    function addNumbers(n1, n2){
      result.textContent = +n1 + +n2;
    }

    HTML:

    <input type="text" value="15" id="varA">
    <input type="text" value="30" id="varB">
    <input type="button" id="add" value="Add">
    <h1 id="testResult"></h1>

Dejar respuesta

Please enter your comment!
Please enter your name here