Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 11 of 11
  1. #1
    New Coder
    Join Date
    Aug 2013
    Location
    France
    Posts
    10
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Getting/Setting the value of an object inside an HTML table with JS

    Hello :
    I’ve just started working on a JavaScript to modify a table.
    Please see an example here :
    http://www.cha****su.eu/testjava.html

    The JS is taken from the W3school site. However, the example there is not in a table.

    I’ve tried document.getElementById("Q1"), document.getElementByName("Q1")
    with the checkbox in the table is set to id=”Q1” or name=”Q1”. None of these work.

    I've tried innerHTML as well. No go.

    I was able to get the “length”, that is to say the “count” of checkboxes.

    Is the problem the fact the objects are inside a table?

    If yes, note I cannot address the table by tag, e.g. <td> as there are a number of cells with different contents under that tag.

    Regards : Hubert Wagner

  • #2
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,642
    Thanks
    0
    Thanked 649 Times in 639 Posts
    Quote Originally Posted by HubertWagner View Post
    Is the problem the fact the objects are inside a table?
    Probably, or it might be that you are using antiquated code from the w3schools site that doesn't work properly in more modern browsers such as IE5.

    See http://javascriptexample.net/domtable.php for a series of examples of how to interact with a table from JavaScript.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #3
    New Coder
    Join Date
    Aug 2013
    Location
    France
    Posts
    10
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Hello Felgall :
    Thank you for your response.

    ...it might be that you are using antiquated code from the w3schools site…

    I'll look into the link you provided.

    Clearly, the folk at W3S put a lot of effort into the site. Thank you whomever you are.

    Regards : Hubert

  • #4
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,642
    Thanks
    0
    Thanked 649 Times in 639 Posts
    Quote Originally Posted by HubertWagner View Post
    Clearly, the folk at W3S put a lot of effort into the site.
    Yes but that site is run by two people and with the number of topics they are trying to cover there just are not enough hours in the day for the two of them to keep all of the topics on their site up to date.

    Had they only picked one or two languages to cover then they would have been able to devote more time to those specific languages and keep their site up to date and what started out as an excellent resource would still be one now instead of it having ended up mostly as a history site showing how things used to be done a decade or so ago.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #5
    New Coder
    Join Date
    Aug 2013
    Location
    France
    Posts
    10
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Hello Stephen :
    I guess I've been talking to the same person by two different names.

    I've not managed to figure out why I'm unable to access an item by id in a table.
    The table is HTML 6 cols x 30 rows. I show the HTML for a typical row below.

    I cannot access the cell items by id. What am I missing?

    Incidentally, I understand innerHTML is not entirely reliable. Is there another way?

    Regards : Hubert


    function reset()
    {
    document.getElementById("quantity-1").innerHTML="0";
    };
    //Activated by :
    <button onclick="reset()">Reset</button>




    <tr>
    <td></td>
    <td>Structural frame</td>
    <td><input value="0" id="cb-1" type="checkbox"></td>
    <td><input value="0" id="quantity-1" size="3" type="text"></td>
    <td><input value="9000" id="unitprice-1" size="10" type="text"></td>
    <td><input id="subtotal-1" size="10" type="text"></td>
    </tr>

    I need to be able to do two things :
    1 Reset all the checkboxes to 'false'.
    Reset all the 'quantity' and 'subTotal' fields to '0'.
    I'd do these in a loop.

    2 Again in a loop:
    Update all the 'subtotal' fields : if(checkbox=true ; subtotal = quantity * unit price)
    Set 'grandtotal' field to the Sum of 'subtotal' fields

  • #6
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,710
    Thanks
    25
    Thanked 660 Times in 659 Posts
    Hubert, You do not need a check box to find the values of the table. You can do this by using IDs. Note that we're not working with tables, they're there for structure, we're working with <input>s.

    This is complicated so if you have questions just ask. Please notice the IDs and how JS works with them. The code will give you a sub-total when an amount is entered and a reset button that clears everything.

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <script>
    function V(thing){
    	return document.getElementById(thing).value;
    }
    function changeContent(){
    		var y = document.getElementById("myTable").rows;
    		for(i=0; i<y.length; i++){
    			document.getElementById('quantity-'+i).value = 0;
    			document.getElementById('subtotal-'+i).value = 0;
    	}
    }
    function do_subtotal(num){
    	document.getElementById('subtotal-'+num).value = V('quantity-'+num) * V('unitprice-'+num);
    }
    </script>
    </head>
    
    <body>
    <table id="myTable" border="1">
    <tr>
    <td>Structure</td>
    <td><input id="quantity-0" value="0" type="text" onblur="do_subtotal(0);" ></td>
    <td><input id="unitprice-0" value="9000" type="text"></td>
    <td><input id="subtotal-0" type="text"></td>
    </tr>
    <tr>
    <td>Structural frame</td>
    <td><input id="quantity-1" value="0" type="text" onblur="do_subtotal(1);" ></td>
    <td><input id="unitprice-1" value="8000" type="text"></td>
    <td><input id="subtotal-1" type="text"></td>
    </tr>
    <tr>
    <td>Shutter case</td>
    <td><input id="quantity-2" value="0" type="text" onblur="do_subtotal(2);" ></td>
    <td><input id="unitprice-2" value="5000" type="text"></td>
    <td><input id="subtotal-2" type="text"></td>
    </tr>
    </table>
    <form>
    <input type="button" onclick="changeContent()" value="RESET">
    </form>
    </body>
    
    </html>
    
    <script type="text/javascript">
    document.
    
    </script>
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  • #7
    New Coder
    Join Date
    Aug 2013
    Location
    France
    Posts
    10
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Hello SunFighter :
    Thank you for this information.
    (You're right about the checkbox. Unnecessary I see now.)

    I'll need time to study the code.

    Best Wishes : Hubert

  • #8
    New Coder
    Join Date
    Aug 2013
    Location
    France
    Posts
    10
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Hello SunFighter :

    Is calling subtotal() from the table line the same thing as sending a message a la OOP?

    1 I see how “changeContent()” is called. But what calls “do_subtotal(n)”?
    What is triggered by removing the focus from the quantity cell?

    2 All three scripts work.
    As there are blank lines in the table, the value of “y” is larger than the highest "n" in “subtotal-n’.
    However, the extra iterations don’t seem to worry “changeContent()”.

    3 I’ve added a line to “changeContent()” to set “grandTotal” field to zero.

    4 I understand the first line of do_subtotal(n) as follows :
    getElementById gets the address of the objects and “V” returns their values and "subtotal-n" is set to the result.

    The second line of “do_subtotal(n)” aims to do a runing update of “grandTotal” in the same way.
    I get the values of “grandTotal” and “subtotal-n.”
    However “grandTotal” + “subtotal” yields a concatenation rather than an addition.

    Is this a syntax or a logic problem?


    <script>
    function V(thing){
    return document.getElementById(thing).value;
    }
    function changeContent(){
    var y = document.getElementById("speadsheet").rows;
    document.getElementById("grandTotal").value = 0;
    for(i=0; i<y.length; i++){
    document.getElementById('quantity-'+i).value = 0;
    document.getElementById('subtotal-'+i).value = 0;
    }
    }
    function do_subtotal(num){
    document.getElementById('subtotal-'+num).value = V('quantity-'+num) * V('unitprice-'+num);
    document.getElementById("grandTotal").value = V("grandTotal") + V('subtotal-'+num);
    }
    </script>



  • #9
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,710
    Thanks
    25
    Thanked 660 Times in 659 Posts
    Quote Originally Posted by HubertWagner View Post
    Is calling subtotal() from the table line the same thing as sending a message a la OOP?
    I don't think so. I stay away from OOP if I can You can do things in JS a number of ways depending on your mood. I could have put a listener on the id="quantity-0" input, but I like the onclick onfocus type of JS calling devises.
    Quote Originally Posted by HubertWagner View Post
    1 I see how “changeContent()” is called. But what calls “do_subtotal(n)”?
    What is triggered by removing the focus from the quantity cell?
    Yes, exactly. It does have a problem with the last input, because you have to click out of it for things to work. Maybe
    Code:
    oninput="do_subtotal(0);"
    would be better, but not in this case, because you have to monitor the input to make sure it's a number and nothing else.


    Quote Originally Posted by HubertWagner View Post
    2 All three scripts work.
    As there are blank lines in the table, the value of “y” is larger than the highest "n" in “subtotal-n’.
    However, the extra iterations don’t seem to worry “changeContent()”.
    Yes, the for loop checks every line(row) in the table but for the empty lines it's multiplication by zero. That's why I set
    Code:
    id="quantity-N" value="0"
    to zero.

    For 3. and 4. Use this:
    Code:
    document.getElementById('grandTotal').value = Number(V('grandTotal')) + Number(V('subtotal-'+num));
    I think that JS sometimes gets confused with the + operator. Number() is a JS function that insures things are interpreted as numbers and not strings.

    So - Using the onblur your new function is
    Code:
    function do_subtotal(num){
    	if(isNaN(V('quantity-'+num))) {
    		document.getElementById('grandTotal').value = Number(V('grandTotal')) - Number(V('subtotal-'+num));
    		document.getElementById('quantity-'+num).value = 0;
    		document.getElementById('subtotal-'+num).value = 0;
    		return;
    	}
    	document.getElementById('subtotal-'+num).value = V('quantity-'+num) * V('unitprice-'+num);
    	document.getElementById('grandTotal').value = Number(V('grandTotal')) + Number(V('subtotal-'+num));
    }
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  • Users who have thanked sunfighter for this post:

    HubertWagner (08-09-2013)

  • #10
    New Coder
    Join Date
    Aug 2013
    Location
    France
    Posts
    10
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Hello SunFighter :
    Thank you for answering those questions. I've added the correction and the new code to the table page. It all works rather elegantly now.

    I like the “is not a number” check. It protects us from typos, entering ‘l’ instead of one or ‘O’ instead of zero. And setting the fields to zero is good feedback.

    Interesting that one must use ‘Number’ to force JS to accept a string as a number. I guess this a consequence of dynamic typing. (a feature not a bug).

    I must say this has been a most interesting exchange. I've learned a lot. And I thank you for your time and patience.

    Best Wishes : Hubert
    Darnac, France

  • #11
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,710
    Thanks
    25
    Thanked 660 Times in 659 Posts
    Your welcome and I hope this works out for you. We are always here if you have any more need of help.
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."


  •  

    Posting Permissions

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