How do I load values into input text fields once the page is loaded?
Question
Right now I'm trying out the following code, but nothing will appear in any of my input text boxes on page load.
HTML:
<body onload="test()">
<input type="text" id="line0"></input>
<br>
<input type="text" id='line1'></input>
<br>
<input type="text" id='line2'></input>
</body>
Javascript:
function test() {
var value = "test|some|thing";
var valueArray = value.split("|");
for (var lineNumber=0; lineNumber < valueArray.size(); lineNumber++)
{
line = "line" + lineNumber;
document.getElementById(line).value = valueArray[lineNumber];
}
}
JFiddle: http://jsfiddle.net/mWL9m/1/
In my actual code, I will be bringing in a value from outside the function, but that isn't really important. Right now I'm just using the test value value .
I've looked at several different threads, but all seem to be focused on onclick rather than onload .
5 answers
solution1
1 2014-07-17 17:50:52
<script>
document.onreadystatechange = function()
{
Javascript code goes here
}
</script>
or
<script>
window.onload = function()
{
Javascript code goes here
}
</script>
solution2
0 2014-07-17 17:40:18
Updated your fiddle, here is the code.
(function(){ //This replaces the onload by executing the code within this annonymous function once the page loads.
var value = "test|some|thing"; //No edits here
var lineNumber = 0; //No edits here
var valueArray = value.split("|");
for (lineNumber=0; lineNumber < valueArray.length; lineNumber++) { //using .length instead of size and initialized lineNumber again, mostly because I like to keep my initialization in the loop, personal preference.
var lineid = "line" + lineNumber; // It was missing "var", changed the variable name too
var currentLine = valueArray[lineNumber]; //same deal
var inputElem=document.getElementById(lineid); //I get the element before accessing the value property, again, preference mostly
inputElem.value = currentLine; //same code.
} //End of for loop
})(); //end of the annonymous function
solution3
0 ACCPTED 2014-07-17 17:44:08
You are using the wrong property to get the size of the array. User .length instead of .size() .
Example: http://jsfiddle.net/u2g2p/1/
function test() {
var value = "test|some|thing";
var valueArray = value.split("|");
for (var lineNumber=0; lineNumber < valueArray.length; lineNumber++)
{
line = "line" + lineNumber;
document.getElementById(line).value = valueArray[lineNumber];
}
}
solution4
0 2014-07-17 17:48:28
There are 2 issues with your fiddle. The first is that you should use length instead of size() to get the length of your array (I don't believe there is a built-in size method for Javascript arrays):
for (lineNumber=0; lineNumber < valueArray.length; lineNumber++) {
And the second is that because of the declaration scope of your test function, it's not being found on load. Read this:
JavaScript not running on jsfiddle.net
And change
function test() {
To this:
window.test = function() {
solution5
0 2014-07-17 18:30:59
It's .length for the number of objects in an array.
/*Javascript*/
function test(){
var testVal = "test|some|thing";
testValArr = testVal.split('|');
for (i = 0; i < testValArr.length; i++) {
document.getElementById('line' + i).value = testValArr[i];
}
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.