最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

html - How to store inputs from a textbox in array in Javascript - Stack Overflow

programmeradmin4浏览0评论

<!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>

<!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>

First, this is my first time learning JS.

So, I have a text-box, a submit button, and a display button. When I enter a number in the text-box, and click submit, it shows the number. I enter my second number and clicking the submit button shows me the second number. Then I click on the display button, it will shows the number 1 and number 2 in order. If I have more inputs in the text-box, the display button will show the entire list of all the inputs from the array.

Thank you!

Share edited Dec 10, 2014 at 8:51 Nicole asked Dec 10, 2014 at 8:20 NicoleNicole 31 gold badge1 silver badge3 bronze badges 7
  • Have you googled anything? – Akshay Khandelwal Commented Dec 10, 2014 at 8:21
  • So, the submit button just reads out the current input, but the display button shows an entire list of all the inputs. – Nicole Commented Dec 10, 2014 at 8:22
  • 2 Have you tried anything? Show some code. – Lloyd Commented Dec 10, 2014 at 8:22
  • I did Google. @AkshayKhandelwal But still don't know how to do it. Could you please help me? Thank you!! – Nicole Commented Dec 10, 2014 at 8:24
  • seriously? you have to look for how to get an element by ID and then get it value and then push in the array.. – Akshay Khandelwal Commented Dec 10, 2014 at 8:27
 |  Show 2 more ments

2 Answers 2

Reset to default 2

Well, since it's your first time and you're learning I won't just give you the answer, but I'll point you in the right direction.

You want to attach a click event on the submit button to add the value to an array, and then print the array on click of the display button.

i think first you must google for this. I write something and you can improve this. I only want to give an example.

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/y9wL27y0/

发布评论

评论列表(0)

  1. 暂无评论