SitePoint Sponsor

User Tag List

Results 1 to 17 of 17

Thread: getElementById

  1. #1
    SitePoint Zealot
    Join Date
    Mar 2011
    Posts
    146
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Red face getElementById

    Hi,

    Ive been working on this for two weeks my javascript skills are beginner to the extreme!

    I can't get it working can anyone see some thing obvious i ve overlooked?
    The results arent showing up in the input area

    Code:
    <html>
    <head>
    	<title>Aggregates</title>
    
    	<script type="text/javascript">
    
                var array = new Array();
    
                function insert(val)
    			{
                    array[array.length]=val;
                }
    
                function show() 
    			{
                    var string="";
                    for(i = 0; i < array.length; i++) 
    			
                    document.getElementById("e").value =    string=string+array[i]+"\n";
                
    			}
    			
    			function sum(numbers) 
    			{     
    			if (numbers.length == 0) 
    			return 0;    
    			for (var i=0,total=0; i<array.length; i++)  ;       
    			   
    			
    			document.getElementById("sum").value = total += numbers[i];return total;
    			}
    			
    			function mean(numbers) 
    			{    
    			return numbers.length == 0 ? 0 : sum(numbers)/numbers.length;
    			
    			document.getElementById("answer") = mean.value;
    			}
    		
            </script>
            
    </head>
    
    <body>
    	<h1>Aggregates</h1>
    
    	<h3>Add as many numbers as you like </br> to the list, then click Calculate.</h3>
        
    	
    	<form id="form">
    	    <input type="text" name="name" value=""></input>
            <input type="button" value="Add to list" onClick="insert(this.form.name.value),show();"></input></br>
            <textarea name="txt" id="e" rows="10" ></textarea> </br>
            
            
            
            <h4>Total (Sum):</h4>
    		<input type="text" id="Sum" value="0"></input></br>
            <input type="button" value="Calculate" onClick="sum(numbers);mean(numbers);"></input> 
           
            
            
            <h4>Average:</h4>
            
            <input type="text" id="answer" value="0"></input></br>
            <input type="button" value="Reset" onClick="form.reset();" />
    	</form>
       
    		
    </body>
    
    </html>
    Last edited by ralph.m; Mar 29, 2011 at 00:02. Reason: added code tags

  2. #2
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,183
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    I'm kind of lost as to what your trying to do as your last 2 functions don't make any sense to me, it looks as though you want to count something but the var number doesn't exist so you would keep getting an undefined var error on the page.
    Blog/Portfolio | Evolution Xtreme | DFG Design | DFG Hosting | CSS-Tricks | Stack Overflow | Paul Irish
    Having lame problems with your code? Let us help by using a jsFiddle

  3. #3
    SitePoint Zealot
    Join Date
    Mar 2011
    Posts
    146
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up

    Your right, it does error


    of the last two functions the first is supposed to get the sum of the array data and second is supposed to work out the average .

    Is that any clearer? Any ideas?

  4. #4
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,183
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    So i assume that for instance you want to retrieve the values stored in the var array, then merge all the stored values into one integer and then divide that by the array.length count?

    Did i get close or a full nail in it?
    Blog/Portfolio | Evolution Xtreme | DFG Design | DFG Hosting | CSS-Tricks | Stack Overflow | Paul Irish
    Having lame problems with your code? Let us help by using a jsFiddle

  5. #5
    SitePoint Zealot
    Join Date
    Mar 2011
    Posts
    146
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think thats a full nail

  6. #6
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,183
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    I believe the below is what your looking for.

    Code JavaScript:
    var total = 0;
     
    function sum() {
        if (!array.length) return false;
     
        for (var i = 0; i < array.length; i++) {
            total = total + array[i];
        }
     
        document.getElementById('sum').value = total;
        return total;
    }
     
    function mean() {
        document.getElementById('answer') = total;
        return !array.length ? 0 : total / array.length;
    }
    Blog/Portfolio | Evolution Xtreme | DFG Design | DFG Hosting | CSS-Tricks | Stack Overflow | Paul Irish
    Having lame problems with your code? Let us help by using a jsFiddle

  7. #7
    SitePoint Zealot
    Join Date
    Mar 2011
    Posts
    146
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks for your help!

    can you tell me why this isn't working?
    var numbers = new Array();

    function insert(val)
    {
    numbers[numbers.length]= parseFloat(val);
    }

    function show()
    {
    var string="";
    for(i = 0; i < numbers.length; i++)

    string= string + numbers[i]+"\n";


    document.getElementById("e").value =string;
    }

  8. #8
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,183
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    Try the following as you have a couple of errors in those functions

    Code JavaScript:
    var array = new Array();
     
    function insert(val) {
        array.push(val);
    }
     
    function show() {
        var string = '';
     
        for (i = 0; i < array.length; i++) {
            string += array[i] + '\n';
        }
     
        document.getElementById('e').value = string;
    }
    Blog/Portfolio | Evolution Xtreme | DFG Design | DFG Hosting | CSS-Tricks | Stack Overflow | Paul Irish
    Having lame problems with your code? Let us help by using a jsFiddle

  9. #9
    SitePoint Zealot
    Join Date
    Mar 2011
    Posts
    146
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    This has been very usefull can you tell me what the push extension does?

    I tried it with .push and it didn't work for me? any suggestions?
    var numbers = new Array();

    function insert(val)
    {
    numbers[numbers.length]= parseFloat(val);
    }


    function show()
    {
    var string="";
    for(i = 0; i < numbers.length; i++)
    {
    string += array[i] +"\n";
    }
    string= string + numbers[i]+"\n";


    document.getElementById("e").value =string;
    }

  10. #10
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by minusten View Post
    can you tell me what the push extension does?
    push() is not an extension. It's a normal part of JavaScript.

    You can read more about it at the documentation page for push()
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  11. #11
    SitePoint Zealot
    Join Date
    Mar 2011
    Posts
    146
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question

    Quote Originally Posted by paul_wilkins View Post
    You can read more about it at the documentation page for push()
    Thanks for the the link very handy!

    Can you see why this wouldn't work im completely out of avenues to pursue

    My only other thought is maybe the numbers input isn't being display because of some html form issue?

    Please disregard the sum() and mean() still working on those.

    When i run this in firefox the error console says val undefined and highlights this first html???

    <html>
    <head>
    <title>Aggregates</title>

    <script type="text/javascript">


    var numbers = new Array();

    function insert(val)
    {
    numbers[numbers.length]= parseFloat(val);
    }


    function show()
    {
    var string="";
    for(i = 0; i < numbers.length; i++)
    {
    string += array[i] +"\n";
    }


    document.getElementById("e").value =string;
    }

    function sum(numbers)
    {
    if (numbers.length == 0)
    for (i=0; i <numbers.length; i++)


    document.getElementById("Sum").value = total += numbers[i];return total;
    }

    function mean(numbers)
    {
    return numbers.length == 0 ? 0 : sum(numbers)/numbers.length;

    document.getElementById("answer") = mean(numbers).value;
    }


    </script>


    </head>

    <body>
    <h1>Aggregates</h1>

    <h3>Add as many numbers as you like </br> to the list, then click Calculate.</h3>


    <form id="form">
    <input type="text" name="name" value=""></input>
    <input type="button" value="Add to list" onClick="insert(val),show();"></input></br>
    <textarea name="txt" id="e" rows="10" ></textarea> </br>



    <h4>Total (Sum)/h4>
    <input type="text" id="txtTotal" value="0"></input></br>
    <input type="button" value="Calculate" onClick="sum(numbers);mean(numbers);"></input>



    <h4>Average/h4>

    <input type="text" id="answer" value="0"></input></br>
    <input type="button" value="Reset" onClick="form.reset();" />
    </form>


    </body>

    </html>
    Last edited by minusten; Mar 30, 2011 at 17:10. Reason: mistake

  12. #12
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by minusten View Post
    TCan you see why this wouldn't work im completely out of avenues to pursue
    When clicking Add to List, the web browser reports this error:
    Uncaught ReferenceError: val is not defined - test.html:58

    So, this seems to be wrong:
    Code:
    insert(val)
    Instead, you need to give the function the value from the input field, so instead of val you need to use this.form.elements.name.value instead, resulting in:

    Code javascript:
    insert(this.form.elements.name.value)

    Then you get another error, which is good news. It means the first error is fixed. Progress!

    The error is:
    Uncaught ReferenceError: array is not defined - test.html:21

    which is this line:
    Code:
    string += array[i] +"\n";
    array is not used anywhere else in the code. Instead, I see that numbers is used.
    That means that array[i] should instead be numbers[i]

    Code javascript:
    string += numbers[i] +"\n";

    Then you have to work out why the sum section is not being updated.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  13. #13
    SitePoint Zealot
    Join Date
    Mar 2011
    Posts
    146
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Theres a new error that points a grren arrow at .this in the ()
    missing formal parameter
    function insert(this.form.elements.name.value)


    I could have sworn id done this , musn't have saved.

    "array is not used anywhere else in the code. Instead, I see that numbers is used.
    That means that array[i] should instead be numbers[i]

    javascript Code:

    string += numbers[i] +"\n";"

  14. #14
    SitePoint Zealot
    Join Date
    Mar 2011
    Posts
    146
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    <html>

    <head>
    <title>Aggregates</title>

    <script type="text/javascript">


    var numbers = new Array();

    function insert(this.form.elements.name.value)
    {
    numbers[numbers.length]= parseFloat(val);
    }


    function show()
    {
    var string="";
    for(i = 0; i < numbers.length; i++)
    {
    string += numbers[i] +"\n";
    }


    document.getElementById("e").value =string;
    }

    function sum(numbers)
    {
    if (numbers.length == 0)
    for (i=0; i <numbers.length; i++)


    document.getElementById("Sum").value = total += numbers[i];return total;
    }

    function mean(numbers)
    {
    return numbers.length == 0 ? 0 : sum(numbers)/numbers.length;

    document.getElementById("answer") = mean(numbers).value;
    }


    </script>


    </head>

    <body>
    <h1>Aggregates</h1>

    <h3>Add as many numbers as you like </br> to the list, then click Calculate.</h3>


    <form id="form">
    <input type="text" name="name" value=""></input>
    <input type="button" value="Add to list" onClick="insert(this.form.elements.name.value),show();"></input></br>
    <textarea name="txt" id="e" rows="10" ></textarea> </br>



    <h4>Total (Sum)/h4>
    <input type="text" id="txtTotal" value="0"></input></br>
    <input type="button" value="Calculate" onClick="sum(numbers);mean(numbers);"></input>



    <h4>Average/h4>

    <input type="text" id="answer" value="0"></input></br>
    <input type="button" value="Reset" onClick="form.reset();" />
    </form>


    </body>

    </html>

  15. #15
    SitePoint Zealot
    Join Date
    Mar 2011
    Posts
    146
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I got it! thanks heaps

    the errors are gone
    the numbers display and are added to numbers array!

    THANK YOU ALL

  16. #16
    SitePoint Zealot
    Join Date
    Mar 2011
    Posts
    146
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    could you help me understand this;

    onClick= "(this.form.elements.name.value);"

    i get (this. form

    a link would do

    thanks

  17. #17
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by minusten View Post
    could you help me understand this;

    onClick= "(this.form.elements.name.value);"

    i get (this. form

    a link would do
    form.elements

    Normally, the form tag uses a unique identifier so that you can easily target that from your script, and the form elements such as input use a name identifier.

    Code html4strict:
    <form id="form">
        <input type="text" name="name" value="">

    By the way, input elements do not have closing tags. They are just a single tag, in much the same way as for <hr> or <br> or <img>

    When you have the form, you can then easily access the form elements collection.

    Code javascript:
    var form = document.getElementById('form');
    var allFields = form.elements;
    var nameField = allFields['name'];
    var nameValue = nameField.value;

    Or, as a condensed version:

    Code javascript:
    var form = document.getElementById('form');
    var nameValue = form.elements['name'].value;

    Which can also be represented as:

    Code javascript:
    var form = document.getElementById('form');
    var nameValue = form.elements.name.value;
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


Tags for this Thread

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
  •