HTML/Javascript Adding text to an array
Question
I'm doing some coding on dreamweaver and encountered a problem while practicing arrays and the like. I tried to make it so when you type something in the box and press the button, it adds the text to the array, allowing the other buttons to display the array. It isn't working and I can't find the right term to google for help.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Batman has cancer</title>
<script>
var colours = ["Red"," Green"," Blue"]
function sort() {
colours.toString
document.getElementById("result1").innerHTML = "unsorted array= " + colours;
colours.sortArray();
colours.toString();
document.getElementById("result2").innerHTML = "sorted arrays= " + colours;
}
function count() {
document.getElementById("Count").innerHTML="=array size is: " + colours.length;
}
function add() {
colours = colours + getElementById("textBox").innerHTML
}
</script>
</head>
<body>
<input type="submit" name="button" id="button" value="Sort" onClick="sort()"/>
<input type="submit" name="button2" id="button2" value="Count" onClick="count()"/>
<input type="text" name="textBox" id="textBox"/>
<input type="submit" name="button3" id="button3" value="Add" onClick="add()"/>
<p id="result1"></p>
<p id="result2"></p>
<p id="Count"></p>
</body>
</html>
3 answers
solution1
0 2016-03-10 10:41:42
Use .push() to add an item to an array and since you are trying to get a textbox value, it will need to be .value rather than .innerHTML.
function add() {
var newItem=getElementById("textBox").value;
colours.push(newItem);
}
solution2
0 2016-03-10 10:47:23
Use .push method to insert data after the last index in array
HTML
use onclick instead of onClick
<input type="submit" name="button3" id="button3" value="Add" onclick="add()"/>
Javascript
function add() {
colours.push(getElementById("textBox").value);
}
solution3
0 ACCPTED 2016-03-10 10:48:26
I rewrote your code:
var colours = ["Red"," Green"," Blue"]; function sort() { document.getElementById("result1").innerHTML = "unsorted array= " + colours; colours.sort(); document.getElementById("result2").innerHTML = "sorted arrays= " + colours; } function count() { document.getElementById("Count").innerHTML="=array size is: " + colours.length; } function add() { colours.push(document.getElementById("textBox").value); }
<input type="submit" value="Sort" onClick="sort()"/> <input type="submit" value="Count" onClick="count()"/> <input type="text" name="textBox" id="textBox"/> <input type="submit" value="Add" onClick="add()"/> <p id="result1"></p> <p id="result2"></p> <p id="Count"></p>
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.