Hi people,
Im having an issue with my array, it instantly shows undefined inputs.
i googled this issue but all i could find is if you were entering your data into a document.write but im using Get.ElementById
i will paste the code below, sorry in advance for it being messy iv been bashing it togethouor.
can someone show me how to get rid of this issue ?
Kind Regards
Adam
<html>
<head>
<title>Football Teams</title>
<script>
var array = new Array();
var number =1;
function insert(val){
array[array.length]=number+val;
}
function show() {
var string="<b>Teams</b><br>";
for(i = 0; i <10 ; i++) {
string =string+array[i]+"<br>";
}
if(array.length > 0)
document.getElementById('myDiv').innerHTML = string;
}
function increase()
{
number += 1;
document.getElementById('number').value=number;
}
</script>
</head>
<body>
<h2>Team Names</h2>
<form name="form1">
<table width="407">
<tr>
<td width="154" align="right"><b>Name</b>
<td width="9"><b> :</b>
<td width="224">
<input type="text" name="name"/>
</tr>
<tr>
<td width="154" align="right">
<td width="9">
<td width="224">
</tr>
<tr>
<td width="154" align="right">
<td width="9">
<td width="224">
<input type="button" Value="Add Team name to Array"
onclick="insert(this.form.name.value),show(),increase();"/>
</tr>
</table>
</form>
<div id="myDiv"></div>
</body>
</html>
Is there a reason you’re using an array at all? This seems to be a much easier way to handle it - unless I’m missing something. Though you do realize this isn’t saving the value anywhere, so as soon as the page refreshes the teams are lost?
<html>
<head>
<title>Football Teams</title>
<script>
var teamNumber = 1;
function updateTeams(value) {
outputValue = document.getElementById('myDiv').innerHTML;
if (outputValue.length == 0) { outputValue += "<b>Teams<b>"; }
outputValue += "<br />" + teamNumber + value;
teamNumber++;
}
</script>
</head>
<body>
<h2>Team Names</h2>
<form name="form1">
<table width="407">
<tr>
<td width="154" align="right"><b>Name</b>
<td width="9"><b> :</b></td>
<td width="224"><input type="text" name="name"/></td>
</tr>
<tr>
<td width="154" align="right"> </td>
<td width="9"> </td>
<td width="224"> </td>
</tr>
<tr>
<td width="154" align="right"> </td>
<td width="9"> </td>
<td width="224">
<input type="button" Value="Add Team name to Array" onclick="updateTeams(this.form.name.value);"/>
</td>
</tr>
</table>
</form>
<div id="myDiv"></div>
</body>
</html>
Yea the work im doing it has to make use of an array.
any ideas ?
If it HAS to be done with an array, it seems like a homework assignment, correct?
If if HAS to be done with an array, I’d do it this way. Still keeps it simple and concise, which is essential in javascript performance…
<html>
<head>
<title>Football Teams</title>
<script>
var teamArray = [];
var teamNumber = 1;
function updateTeams(value) {
teamArray.push(teamNumber + ' ' + value); //adds the team number + the team name to the array
//create the output to write to the myDiv div element....
outputValue = "<b>Teams<b>";
for (i = 0; i < teamArray.length; i++) {
outputValue += "<br />" + teamArray[i];
}
document.getElementById('myDiv').innerHTML = outputValue;
// increment the team number...
teamNumber++;
}
</script>
</head>
<body>
<h2>Team Names</h2>
<form name="form1">
<table width="407">
<tr>
<td width="154" align="right"><b>Name</b>
<td width="9"><b> :</b></td>
<td width="224"><input type="text" name="name"/></td>
</tr>
<tr>
<td width="154" align="right"> </td>
<td width="9"> </td>
<td width="224"> </td>
</tr>
<tr>
<td width="154" align="right"> </td>
<td width="9"> </td>
<td width="224">
<input type="button" Value="Add Team name to Array" onclick="updateTeams(this.form.name.value);"/>
</td>
</tr>
</table>
</form>
<div id="myDiv"></div>
</body>
</html>
thanks for the guidance on the code, so what in my code is it making the array display undefined as soon as i enter data?
as there are differenaces in our code but we both use Get.ElementById
If you’re still using your code, the culprit is probably the loop inside the show method as it’s looking for 10 occurrences, even if none exist. You’ve also got an assignment (in the increase method) of a value to an element (‘number’) that doesn’t exist in the html.
so how would you run the program without causing this undefined but at the same time loop the team entries till it reaches 10
Simple, use array.length in your for loop condition. Then you can check in your for loop and do a break if i == 9.
for(i = 0; i < array.length; i++) {
// do something
if(i == 9)
break;
}
Or if you want to avoid the additional check each step in the loop (not to mention the break), calculate the limit first:
var arrayLimit = (array.length > 10 ? 10 : array.length);
for(i = 0; i < arrayLimit; i++) {
// do something
}