SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Enthusiast
    Join Date
    Nov 2011
    Posts
    40
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Array = Undefined

    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

    Code JavaScript:
    <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>&nbsp;:</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>

  2. #2
    Just Blow It bronze trophy
    DaveMaxwell's Avatar
    Join Date
    Nov 1999
    Location
    Mechanicsburg, PA
    Posts
    7,249
    Mentioned
    111 Post(s)
    Tagged
    1 Thread(s)
    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?

    Code HTML4Strict:
    <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>&nbsp;:</b></td>
        <td width="224"><input type="text" name="name"/></td>
       </tr>
       <tr>
        <td width="154" align="right">&nbsp;</td>
        <td width="9">&nbsp;</td>
        <td width="224">&nbsp;</td>
       </tr>
       <tr>
        <td width="154" align="right">&nbsp;</td>
        <td width="9">&nbsp;</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>
    Dave Maxwell - Manage Your Site Team Leader
    My favorite YouTube Video! | Star Wars, Dr Suess Style

  3. #3
    SitePoint Enthusiast
    Join Date
    Nov 2011
    Posts
    40
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yea the work im doing it has to make use of an array.

    any ideas ?

  4. #4
    Just Blow It bronze trophy
    DaveMaxwell's Avatar
    Join Date
    Nov 1999
    Location
    Mechanicsburg, PA
    Posts
    7,249
    Mentioned
    111 Post(s)
    Tagged
    1 Thread(s)
    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....
    Code:
    <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>&nbsp;:</b></td>
        <td width="224"><input type="text" name="name"/></td>
       </tr>
       <tr>
        <td width="154" align="right">&nbsp;</td>
        <td width="9">&nbsp;</td>
        <td width="224">&nbsp;</td>
       </tr>
       <tr>
        <td width="154" align="right">&nbsp;</td>
        <td width="9">&nbsp;</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>
    Dave Maxwell - Manage Your Site Team Leader
    My favorite YouTube Video! | Star Wars, Dr Suess Style

  5. #5
    SitePoint Enthusiast
    Join Date
    Nov 2011
    Posts
    40
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  6. #6
    Just Blow It bronze trophy
    DaveMaxwell's Avatar
    Join Date
    Nov 1999
    Location
    Mechanicsburg, PA
    Posts
    7,249
    Mentioned
    111 Post(s)
    Tagged
    1 Thread(s)
    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.
    Dave Maxwell - Manage Your Site Team Leader
    My favorite YouTube Video! | Star Wars, Dr Suess Style

  7. #7
    SitePoint Enthusiast
    Join Date
    Nov 2011
    Posts
    40
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    so how would you run the program without causing this undefined but at the same time loop the team entries till it reaches 10

  8. #8
    SitePoint Wizard
    Join Date
    Dec 2003
    Location
    USA
    Posts
    2,582
    Mentioned
    29 Post(s)
    Tagged
    0 Thread(s)
    Simple, use array.length in your for loop condition. Then you can check in your for loop and do a break if i == 9.

    Code:
    for(i = 0; i < array.length; i++) {
      // do something
      if(i == 9)
        break;
    }

  9. #9
    Just Blow It bronze trophy
    DaveMaxwell's Avatar
    Join Date
    Nov 1999
    Location
    Mechanicsburg, PA
    Posts
    7,249
    Mentioned
    111 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by samanime View Post
    Simple, use array.length in your for loop condition. Then you can check in your for loop and do a break if i == 9.
    Or if you want to avoid the additional check each step in the loop (not to mention the break), calculate the limit first:

    Code:
    var arrayLimit = (array.length > 10 ? 10 : array.length);
    for(i = 0; i < arrayLimit; i++) {
      // do something
    }
    Dave Maxwell - Manage Your Site Team Leader
    My favorite YouTube Video! | Star Wars, Dr Suess Style


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •