HTML fonction javascript question. [objet HTMLInputElement] sortie d'erreur

Je suis en train de faire une simple page html avec deux zones de texte et un bouton qui ajoute les deux nombres ensemble lorsque vous cliquez dessus. À ma sortie, je suis seulement un [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>

Toute aide serait appréciée. J'ai essayé de changer .innerHTML à .value déjà mais puis-je obtenir rien du tout comme un résultat.

  • varA est le input élément, et non pas sa valeur, ce qui serait varA.value. Cependant, vous allez avoir besoin de changer, que pour un certain nombre avant de les ajouter ensemble, sinon vous vous retrouverez avec la concaténation de chaîne.
  • Note input n'ont pas de contenu, de sorte que vous pouvez utiliser <input ...> ou <input ... />, mais pas <input ...></input>.
InformationsquelleAutor Xfmym | 2014-10-05
  1. 2

    Je suppose que vous voulez le résumé mathématique et non pas la concaténation de chaîne. Si c'est le cas, vous pouvez utiliser les éléments suivants:

    Mise à JOUR basé sur commentaire:

    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>

    Voici un travail de Violon: http://jsfiddle.net/JohnnyEstilles/ex09fx7k/.

    • Alors que cela fonctionne, l' addNumbers n'est plus utile pour tout autre type d'élément.
    • Ensuite, vous pouvez simplement passer les id des éléments comme des chaînes à la fonction. J'ai mis à jour ma réponse.
    InformationsquelleAutor JME
  2. 1

    Quelques corrections:

    • Vous ajoutez les entrées éléments au lieu de leur value.
    • De convertir sa chaîne de valeur pour un certain nombre, vous pouvez utiliser unaire +.
    • Au lieu de inline écouteurs d'événement, de mieux utiliser les 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>

    InformationsquelleAutor Oriol