我如何使用 JavaScript 将输入从文本框中获取到变量然后打印变量的值？

Question

I want to take the value of a text box and put it with a variable, then print the value of the variable as text on the page when a button is pressed. I'm using JavaScript and not using the form tag. So, how do I do this with what I have?

my code:

var x = document.getElementById("I1");
var y = document.getElementById("I2");
var z = x+y;

document.getElementById("B2").onclick = function myFunction2(){
  documen.getElementById("H2").innerHTML = x;
}

Answer 1

If I understand you correctly, you'll simply want to grab the .innerHTML from your <textarea> , and assign that to x . Also note that you have documen instead of document inside of your click function.

Note that you're probably also looking to output z rather than x . This will only work (the way you expect) if both x and y are integers, so it's also a good idea to run parseInt() over the two values.

Here's a working example:

 var x = parseInt(document.getElementById("I1").innerHTML); var y = parseInt(document.getElementById("I2").innerHTML); var z = x + y; document.getElementById("B2").onclick = function myFunction2() { document.getElementById("H2").innerHTML = z; }

 <textarea id="I1">1</textarea> <br /> <div id="I2">2</div> <br /> <button id="B2">Button</button> <br /> <br /> <div id="H2"></div>

Answer 2

Are I1 and I2 the ids of your textbox? because to get the inside text you need to use

var x = document.getElementById("I1").value;

Answer 3

You should rely on the value attribute of the textarea instead of its innerHTML attribute, and fetch that in the click event handler of the button.

 document.getElementById("B2").onclick = function() { var x = document.getElementById("I1").value; document.getElementById("H2").innerHTML = x; }

 <textarea id="I1">1</textarea> <br /> <button id="B2">Button</button> <br /> <br /> <div id="H2"></div>

Answer 4

 document.getElementById("B2").onclick = function myFunction2(){ var x = Number(document.getElementById("I1").value); var y = Number(document.getElementById("I2").value); var z = x+y; document.getElementById("H2").innerHTML = z; }

 <input type="text" id="I1" value="" /> + <input type="text" id="I2" value="" /> = <button id="B2"> ? </button> <span id="H2"> </span>