如何在Javascript中存储数组中文本框的输入

时间:2014-12-10 08:20:26

标签: javascript html



<!DOCTYPE html>

<html>

<head>


<form id="form1">


Beets:<input id="number1" type="integer" size = "5">

Artichokes: <input id="number2" type="integer" size = "5">

Carrots: <input id="number3" type="integer" size = "5">

</form>

<button id = "submitButton" onclick="RunApp()" > Submit</button>
<button id = "displayButton" onclick="getAllValues()" > Display</button>

<script>


var str = "";
 function getAllValues() {
     var input1, inputs;
	 input1 = document.getElementById("form1");

	 inputs = input1.elements["number1"].value;

     for (i = 0; i < inputs.length; i++) {
         str += inputs[i].value + "  ";
     }
     alert(str);
 }


function RunApp()

{

var beets, artichokes, carrots, input1, input2, input3;


// getting inputs into variables


input1 = document.getElementById("form1");

beets = input1.elements["number1"].value;


input2 = document.getElementById("form1");

artichokes = input1.elements["number2"].value;


input3 = document.getElementById("form1");

carrots = input1.elements["number3"].value;




if (beets == "" || carrots == "" || artichokes == "" || isNaN(beets) || isNaN(carrots) || isNaN(artichokes))

{

    document.getElementById("demo").innerHTML+= "not valid" + "<br>";

    document.getElementById("demo").innerHTML+= "--------------------------" + "<br>";

}

else

{


document.getElementById("demo").innerHTML+= "Beets = " + beets + "<br>";    document.getElementById("demo").innerHTML+= "Artichokes = " + artichokes + "<br>";
document.getElementById("demo").innerHTML+= "Carrots = " + carrots + "<br>";


}
}




</script>


<p id="demo"></p>


</head>

<body>


</body>
</html>
&#13;
&#13;
&#13;

首先,这是我第一次学习JS。

所以,我有一个文本框,一个提交按钮和一个显示按钮。当我在文本框中输入一个数字,然后单击“提交”时,它会显示该数字。我输入第二个号码,然后点击提交按钮显示第二个号码。然后我点击显示按钮,它将按顺序显示数字1和数字2。如果我在文本框中有更多输入,则显示按钮将显示阵列中所有输入的完整列表。

谢谢!

2 个答案:

答案 0 :(得分:2)

嗯,因为这是你第一次和你学习我不会只给你答案,但我会指出你正确的方向。

您希望在attach a click event的提交按钮上add the value到数组,然后点击显示按钮打印数组。

答案 1 :(得分:0)

我认为首先你必须谷歌这个。我写了一些东西,你可以改进这一点。我只想举个例子。

HTML:

<input type="text" id="inputbox">
<br/>
<button type="button" id="submit">Submit</button>
<button type="button" id="display">Display</button>
<br/>
<div id="screen"></div>

JS:

var inputArray = [];
var input = document.getElementById('inputbox');
var screen = document.getElementById('screen');

document.getElementById('submit').onclick = function () {
    inputArray.push(input.value);
    screen.innerHTML = input.value;
};
document.getElementById('display').onclick = function () {
    screen.innerHTML = inputArray
};

http://jsfiddle.net/y9wL27y0/