Add Items in Blank Array, Javascript display items
Question
I want to get inputs from a html textbox and arrange the output in arrays. i followed this Example here http://www.w3resource.com/javascript-exercises/javascript-array-exercise-13.php
Now i have been able to do something like this , except i want it to print the arrays on a div tag, which i dont seem to get correctly. Code looks like this
<!doctype html>
<html>
<head>
<script type=text/javascript>
var x;
var y;
var z;
var array = Array();
function add_element_to_array()
{
array[x] = document.getElementById("institution_name").value;
array[y] = document.getElementById("degree_obtained").value;
array[z] = document.getElementById("honors_acheieved").value;
x++
y++
z++;
document.getElementById("institution_name").value = "";
document.getElementById("degree_obtained").value = "";
document.getElementById("honors_acheieved").value = "";
}
</script>
</head>
<title>Test Javascript</title>
<h1>Test JS</h1>
<body>
<form name="xform" id="xform" method="post" action="samris.php"/>
Institution Name: <input type="text" name="institution_name" id="institution_name" /> </br>
Degree Obtained: <input type="text" name="degree_obtained" id="degree_obtained" /></br>
Honors Achieved: <input type="text" name="honors_acheieved" id="honors_acheieved" /></br>
</p>
<input type="button" name="Add" id="add" value="add" onclick=add_element_to_array();/>
</form>
<div>
</div>
</body>
</html>
I wonder why its not printing it back to the div column
2 answers
solution1
1 2017-06-20 12:34:03
<!doctype html> <html> <head> <script type=text/javascript> var array = []; function add_element_to_array() { array.push(document.getElementById("institution_name").value); array.push(document.getElementById("degree_obtained").value); array.push(document.getElementById("honors_acheieved").value); document.getElementById("institution_name").value = ""; document.getElementById("degree_obtained").value = ""; document.getElementById("honors_acheieved").value = ""; } </script> </head> <title>Test Javascript</title> <h1>Test JS</h1> <body> <form name="xform" id="xform" method="post" action="samris.php" /> Institution Name: <input type="text" name="institution_name" id="institution_name" /> </br> Degree Obtained: <input type="text" name="degree_obtained" id="degree_obtained" /> </br> Honors Achieved: <input type="text" name="honors_acheieved" id="honors_acheieved" /> </br> </p> <input type="button" name="Add" id="add" value="add" onclick="add_element_to_array()" /> </form> <div> </div> </body> </html>
This will be the code. Please check this, maybe it can help. You used x, y and z variable which is not needed at all. Just push the values in the array.
There was another mistake in your code. You declared the array as Array(). It's not correct. In Javascript we can declare an array using Array literal ([]) or new Array.
The array will content all the values. Now you can print it in a div.
solution2
0 2017-06-20 12:32:02
I believe there are 2 problems 1. Your are not initializing the array indices ( x, y and z) at the beginning in your javascript. Please check after modifying your as below
<script type=text/javascript>
var x = 0;
//var y;
//var z;
var array = Array();
function add_element_to_array()
{
array[x++] = document.getElementById("institution_name").value;
array[x++] = document.getElementById("degree_obtained").value;
array[x++] = document.getElementById("honors_acheieved").value;
//x++
//y++
//z++;
document.getElementById("institution_name").value = "";
document.getElementById("degree_obtained").value = "";
document.getElementById("honors_acheieved").value = "";
}
</script>
I do not see any div in your html where you are populating the array contents. You need to assign an id to the div and then add javascript to assign content to that div, something like
document.getElementById('arrayOutput').value = array.toString();
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.