SitePoint Sponsor

User Tag List

Results 1 to 6 of 6

Hybrid View

  1. #1
    Non-Member
    Join Date
    Aug 2007
    Posts
    266
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Drop-Down Box Subtraction

    Hi,

    How do I subtract a number from a Drop-Down box, from another Drop-Down box, and display the result inside a text box?

  2. #2
    SitePoint Evangelist
    Join Date
    Jul 2007
    Posts
    345
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Assuming the two select elements and the text box all have ids:
    Code:
    var num1 = document.getElementById("sel1").value;
    var num2 = document.getElementById("sel2").value;
    document.getElementById("txt1").value = num1 - num2;

  3. #3
    Non-Member
    Join Date
    Aug 2007
    Posts
    266
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Drop-Down Box Subtraction

    r51,

    How come the following code doesn't work?:

    Code:
    <html>
    <head>
    <title></title>
    </head>
    <body>
    <script>
    var num1 = document.getElementById("sel1").value;
    var num2 = document.getElementById("sel2").value;
    document.getElementById("txt1").value = num1 - num2;
    </script>
    <select name="sel1" id="sel1">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
      <option>6</option>
      <option>7</option>
      <option>8</option>
      <option>9</option>
      <option>10</option>
    </select>
    <select name="sel2" id="sel2">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
      <option>6</option>
      <option>7</option>
      <option>8</option>
      <option>9</option>
      <option>10</option>
    </select>
    <input name="txt1" type="text" id="txt1">
    </body>
    </html>

  4. #4
    SitePoint Evangelist
    Join Date
    Jul 2007
    Posts
    345
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You need to assign values to your options. Also, you need to move your script to the head section (or an external file) and wait for the page to load before trying to access DOM elements.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Select Example</title>
    <script type="text/javascript">
    	window.onload = function() {
    		document.getElementById("btn1").onclick = function() {
    			var num1 = document.getElementById("sel1").value;
    			var num2 = document.getElementById("sel2").value;
    			document.getElementById("txt1").value = num1 - num2;	
    		}
    	}
    </script>
    </head>
    <body>
    <select name="sel1" id="sel1">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
      <option value="4">4</option>
      <option value="5">5</option>
      <option value="6">6</option>
      <option value="7">7</option>
      <option value="8">8</option>
      <option value="9">9</option>
      <option value="10">10</option>
    </select>
    <select name="sel2" id="sel2">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
      <option value="4">4</option>
      <option value="5">5</option>
      <option value="6">6</option>
      <option value="7">7</option>
      <option value="8">8</option>
      <option value="9">9</option>
      <option value="10">10</option>
    </select>
    <input name="txt1" type="text" id="txt1" />
    <input type="button" value="Go" id="btn1" />
    </body>
    </html>

  5. #5
    Non-Member
    Join Date
    Aug 2007
    Posts
    266
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    r51,

    How do I get the script to calculate upon values being changed inside the Drop-Down boxes, instead of clicking on "Go!"?

    Many Thanks, much appreciated!

  6. #6
    SitePoint Evangelist
    Join Date
    Jul 2007
    Posts
    345
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    function updateTxt() {
    	var num1 = document.getElementById("sel1").value;
    	var num2 = document.getElementById("sel2").value;
    	document.getElementById("txt1").value = num1 - num2;
    }
    window.onload = function() {
      document.getElementById("sel1").onchange = document.getElementById("sel2").onchange = updateTxt;
    }


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
  •