SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Member
    Join Date
    Jun 2008
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Changing the value of an element

    I'm a noob, almost finished with "Simply Javascript." I've written a script that's supposed to update a displayed value with a calculation using a separate, entered value, after the separate value has been entered (using a "change" event listener). Below is the section of code giving me trouble:

    Code:
    	calc: function()
    	{
    		if (this.id == "taxiFuelGal")
    		{
    			var fuelGal = this.value;
    			var fuelField = document.getElementById("taxiFuelPounds");
    			fuelField.value = fuelGal * 6;
    		alert(fuelField.value);
    		}
    	},
    The goal is to have the element whose id is "taxiFuelPounds" display the result of the calculation, fuelGal * 6. The alert box confirms the calculation is being performed correctly and assigned to fuelField.value, but the displayed field (initially blank) never changes. What am I doing wrong? Thanks.

    Involute

  2. #2
    masquerading Nick's Avatar
    Join Date
    Jun 2003
    Location
    East Coast
    Posts
    2,215
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Why are you getting the value of fuelField? You don't appear to be doing anything with it except changing it, in which case it doesn't matter what the old value is. What type of element is fuelField?
    Nick . all that we see or seem, is but a dream within a dream
    Show someone you care, send them a virtual flower.
    Good deals on men's watches

  3. #3
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,527
    Mentioned
    84 Post(s)
    Tagged
    4 Thread(s)
    Please show the HTML around the fuel field area.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  4. #4
    SitePoint Member
    Join Date
    Jun 2008
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for looking at this. Below is the relevant HTML. The idea is to present a row in a table with three columns. The first cell labels the row ("Taxi fuel:"). The second cell (id="taxiFuelPounds") is calculated by multiplying what the user enters into the third cell (id="taxiFuelGal") by 6. fuelField is a reference to the second cell. I never examine its value, I only change it.
    Code:
      <tr> 
        <td width="156" height="38"> 
          <div align="right"> 
            <font face="Arial, Helvetica, sans-serif" size="3" class="rows">Taxi fuel:</font>
          </div>
        </td>
        <td width="43" height="38"> 
          <div align="center" class="rows calc" id="taxiFuelPounds"></div>
        </td>
        <td width="53" bordercolor="#000000" height="38" valign="middle"> 
          	<div align="center"> 
            <input type="text" name="taxiFuelGal" maxlength="3" value="1.5" size="2" 
            	class="rows calc" id="taxiFuelGal">
            </div>
        </td>
      </tr>
    Involute

  5. #5
    masquerading Nick's Avatar
    Join Date
    Jun 2003
    Location
    East Coast
    Posts
    2,215
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok if you're trying to update the content of a div you need to use .innerHTML

    Code:
    document.getElementById('taxiFuelPounds').innerHTML = fuelField.value;
    Nick . all that we see or seem, is but a dream within a dream
    Show someone you care, send them a virtual flower.
    Good deals on men's watches

  6. #6
    SitePoint Member
    Join Date
    Jun 2008
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Aaah, that did it. Thanks!

    Involute

  7. #7
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,527
    Mentioned
    84 Post(s)
    Tagged
    4 Thread(s)
    You should really stay away from innerHTML and stay with a more standards-based approach.

    Here is the standard way of doing what you're after.
    You create a text node and append it to the div, and before you append it you remove any other nodes that may already be there.

    Code javascript:
    calc: function()
    {
    	if (this.id == "taxiFuelGal")
    	{
    		var fuelGal = this.value;
    		var fuelField = document.getElementById("taxiFuelPounds");
    		var fuelPounds = fuelGal * 6;
    		while (fuelField.firstChild) {
    			fuelField.removeChild(fuelField.firstChild);
    		}
    		fuelField.appendChild(document.createTextNode(fuelPounds));
    	}
    }
    Last edited by paul_wilkins; Jun 22, 2008 at 13:49.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  8. #8
    SitePoint Member
    Join Date
    Jun 2008
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the alternative. I can get both to work but will use the standards-based approach.

    Involute

  9. #9
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,527
    Mentioned
    84 Post(s)
    Tagged
    4 Thread(s)
    That's alright. Another way that may work better depending on the situation, is to replace the old div with a new one.

    Code javascript:
    // copy old container
    var el = fuelField.cloneNode(false);
    // add new content
    el.appendChild(document.createTextNode(fuelPounds));
    // replace with new content where old was
    fuelField.parentNode.replaceChild(el, fuelField);
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


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
  •