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 13 of 13
  1. #1
    New to the CF scene
    Join Date
    Oct 2013
    Posts
    7
    Thanks
    4
    Thanked 0 Times in 0 Posts

    New to javascript, anyone know whats wrong?

    Below is a part of my code inside a table the part im haven trouble with is the second part of the table where the amount is selected and for a troubleshoot phase its all times by 1.95. and the individual areas work fine but i cant seem to get the code to save the variable in the total slot and add it to the new amount every time the function is called. Hope some 1 knows whats wrong even if not ty all who take the time to try and assist;P function total4 main problem area i think

    Code:
    <table border="1" width=40% margin-left:auto;>
    	<tr>
    		<th>
    			Style
    		</th>
    		<th>
    			Appearance
    		</th>
    		<th>
    			Amount
    		</th>
    		<th>
    			Total
    		</th>
    	</tr>
    	<tr>
    		<td>
    			<select onchange="dctype(value)">
      				<option value="0">Maroon</option>
      				<option value="1">Turquoise</option>
      				<option value="2">Blue</option>
    			</select>
    		</td>
    		<td>
    			<script language="Javascript">
    				var p1 = new Image();
    				var p2 = new Image();
    				var p3 = new Image();
    				p1.src="assets/iframe/images/mar.jpg";
    				p2.src="assets/iframe/images/turq.jpg";
    				p3.src="assets/iframe/images/blue.jpg";
    				var imgArray = new Array( p1, p2, p3 );
    			function dctype(x)
    			{
    				document.dc.src = imgArray[x].src;
    			}
    			</script>
    			<img src="assets/iframe/images/mar.jpg" name="dc" width="50px" height="50px">
    
    		</td>
    		<td>
    			<input type="number" value="0" onclick="total(value)">
    		</td>
    		<td>
    			<script>
    				function total(amt)
    				{
    					document.getElementById("output-value").value = (1.95*amt);
    					total4(amt*1.95);
    				}
    			</script>
    			<input type="number" id="output-value" readonly="readonly" value="0">
    		</td>
    	</tr>
    	<tr>
    		<td>
    			<select onchange="rattype(value)">
      				<option value="0">Type 1</option>
      				<option value="1">Type 2</option>
      				<option value="2">Type 3</option>
    			</select>
    		</td>
    		<td>
    			<script language="Javascript">
    				var p4 = new Image();
    				var p5 = new Image();
    				var p6 = new Image();
    				p4.src="assets/iframe/images/mar.jpg";
    				p5.src="assets/iframe/images/turq.jpg";
    				p6.src="assets/iframe/images/blue.jpg";
    				var imgArray = new Array( p4, p5, p6 );
    			function rattype(y)
    			{
    				document.rat.src = imgArray[y].src;
    			}
    			</script>
    			<img src="assets/iframe/images/mar.jpg" name="rat" width="50px" height="50px">
    		</td>
    		<td>
    			<input type="number" value="0" onclick="total2(value)">
    		</td>
    		<td>
    			<script>
    				function total2(amt2)
    				{
    					document.getElementById("output-value2").value = (1.95*amt2);
    					total4(amt2*1.95);
    				}
    			</script>
    			<input type="number" id="output-value2" readonly="readonly" value="0">
    		</td>
    	</tr>
    	<tr>
    		<td>
    			<select onchange="spirtype(value)">
      				<option value="0" >Turtle Shell</option>
      				<option value="1">Round</option>
      				<option value="2">Guord</option>
    			</select>
    		</td>
    		<td>
    			<script language="Javascript">
    				var p1 = new Image();
    				var p2 = new Image();
    				var p3 = new Image();
    				p1.src="assets/iframe/images/mar.jpg";
    				p2.src="assets/iframe/images/turq.jpg";
    				p3.src="assets/iframe/images/blue.jpg";
    				var imgArray = new Array( p1, p2, p3 );
    				function spirtype(x)
    					{
    						document.spir.src = imgArray[x].src;
    					}
    			</script>
    			<img src="assets/iframe/images/mar.jpg" name="spir" width="50px" height="50px">
    		</td>
    		<td>
    			<input type="number" value="0" onclick="total3(value)">
    		</td>
    		<td>
    			<script>
    				function total3(amt3)
    				{
    					document.getElementById("output-value3").value = (1.95*amt3);
    					total4(amt3*1.95);
    				}
    			</script>
    			<input type="number" id="output-value3" readonly="readonly" value="0">
    		</td>
    	</tr>
    	<tr>
    		<td colspan="3">
    		</td>
    		<td>
    			<script>
    
    				function total4(x)
    				{
    				 				z=document.getElementById("output-value4").value;
    				 				y=z+x;
    								document.getElementById("output-value4").value =y;
    				}
    			</script>
    			<input type="number" id="output-value4" readonly="readonly" value="0">
    		</td>
    </table>
    Last edited by VIPStephan; 10-14-2013 at 06:25 PM. Reason: added code BB tags

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,801
    Thanks
    6
    Thanked 1,023 Times in 996 Posts
    If you post any code please put it in between [CODE][/CODE] tags. It makes scanning your posts much easier. You can do this by clicking the small “#” icon above the reply field.

  • Users who have thanked VIPStephan for this post:

    mttwkeller (10-14-2013)

  • #3
    New to the CF scene
    Join Date
    Oct 2013
    Posts
    7
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Right on sorry about that but thx for correcting it for me;P

  • #4
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,642
    Thanks
    0
    Thanked 649 Times in 639 Posts
    Try moving the script just before the </body> tag - that's where JavaScript works best.
    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.

  • Users who have thanked felgall for this post:

    mttwkeller (10-14-2013)

  • #5
    New to the CF scene
    Join Date
    Oct 2013
    Posts
    7
    Thanks
    4
    Thanked 0 Times in 0 Posts
    nope same issue it sends a variable on every other increased click on the amount inputs 1,2,3 and but wont save the initial input 4 element value to a variable to add to it;(

  • #6
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,487
    Thanks
    23
    Thanked 636 Times in 635 Posts
    First keep JS separate from HTML. You have intertwined them to a fault. Move the JS to the end as felgall said.
    After I did that it's easy to see the the total function is repeated three times, so I combined them.

    To your <input>s I have added autofocus and tabindex, removed the value="0" ( interferes with both added attributes) . I have removed the image part of the JS. You should rework that and re-install. Here is new code.
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title>Title of the document</title>
    </head>
    
    <body>
    <table border="1" width=40% margin-left:auto;>
    <tr>
    	<th>Style</th>
    	<th>Appearance</th>
    	<th>Amount</th>
    	<th>Total</th>
    </tr>
    <tr>
    <td>
    	<select onchange="dctype(value)">
    	<option value="0">Maroon</option>
    	<option value="1">Turquoise</option>
    	<option value="2">Blue</option>
    	</select>
    </td>
    <td><img src="assets/iframe/images/mar.jpg"  alt="dc" width="50px" height="50px"></td>
    <td><input autofocus="autofocus" tabindex="1" type="number" value="" onkeydown="if(event.keyCode == 13) tally(value, 1);" onblur="tally(value, 1);"></td>
    <td><input type="number" id="output-value1" readonly="readonly" value="0"></td>
    </tr>
    <tr>
    <td>
    	<select onchange="rattype(value)">
    	<option value="0">Type 1</option>
    	<option value="1">Type 2</option>
    	<option value="2">Type 3</option>
    	</select>
    </td>
    <td><img src="assets/iframe/images/mar.jpg" alt="rat" width="50px" height="50px"></td>
    <td><input tabindex="2" type="number" value="" onkeydown="if(event.keyCode == 13) tally(value, 2);" onblur="tally(value, 2);"></td>
    <td><input type="number" id="output-value2" readonly="readonly" value="0"></td>
    </tr>
    
    <tr>
    <td>
    	<select onchange="spirtype(value)">
    	<option value="0" >Turtle Shell</option>
    	<option value="1">Round</option>
    	<option value="2">Guord</option>
    	</select>
    </td>
    <td><img src="assets/iframe/images/mar.jpg" alt="spir" width="50px" height="50px"></td>
    <td><input tabindex="3" type="number" value="" onkeydown="if(event.keyCode == 13) tally(value, 3);" onblur="tally(value, 3);"></td>
    <td><input type="number" id="output-value3" readonly="readonly" value="0"></td>
    </tr>
    <tr>
    <td colspan="3"></td>
    <td><input type="number" id="output-value4" readonly="readonly" value="0"></td>
    </tr>
    </table>
    
    
    <script>
    function tally(amt, num){
    	document.getElementById("output-value"+num).value = (1.95 * amt);
    	total4();
    }
    
    function total4(){
    	var a = Number(document.getElementById("output-value1").value);
    	a += Number(document.getElementById("output-value2").value);
    	a += Number(document.getElementById("output-value3").value);
    	document.getElementById("output-value4").value = a;
    }
    </script>
    </body>
    </html>
    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:

    mttwkeller (10-14-2013)

  • #7
    New to the CF scene
    Join Date
    Oct 2013
    Posts
    7
    Thanks
    4
    Thanked 0 Times in 0 Posts
    just saved your code and it seems to still have a few bugs in other then my intended results, tho you've introduced me to some new "code" if you will and im positive ill be able to work out the issue from here thx so much guys i been tryin to self learn this for like 2 weeks now and was completely stumped heh. I condense my java from now on that does make it so much easier to manipulate;P

  • #8
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,487
    Thanks
    23
    Thanked 636 Times in 635 Posts
    still have a few bugs
    what were they?

    My code is ALPHA, not even to the beta stage so not surprised.
    Evolution - The non-random survival of random variants.

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

  • #9
    New to the CF scene
    Join Date
    Oct 2013
    Posts
    7
    Thanks
    4
    Thanked 0 Times in 0 Posts
    not a bug in your programming at all dont get me wrong it works fine tho, the issue is i want everytime they change the amount it to update the total. thinking of changeing your on keydown portion back to onclick or was there a spacific reason you used the keydown?

  • #10
    New to the CF scene
    Join Date
    Oct 2013
    Posts
    7
    Thanks
    4
    Thanked 0 Times in 0 Posts
    as i see doin that doesnt change the outcome of the output at all so maybe i still needa use some google for the onblur cause obviously im still not quite grasping it;P

  • #11
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,487
    Thanks
    23
    Thanked 636 Times in 635 Posts
    ... a specific reason you used the keydown?
    Yes, if you typed in 12,456.00 you would be calling the JS 9 times. You could add a submit button ( not JS 'submit' but a 'button' with submit written on it) and have that do the update via a call to total4() function.
    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:

    mttwkeller (10-14-2013)

  • #12
    New to the CF scene
    Join Date
    Oct 2013
    Posts
    7
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Awesome that makes it so i can use onclick for my inputs 1 2 and 3 so there insta updated if you will and clicking the button will give me my final Total and i can add it to the column space 3 area so i doesnt hurt my design either. Thx so much for your help Sunfighter;P

  • #13
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,487
    Thanks
    23
    Thanked 636 Times in 635 Posts
    Or you could have one button here
    Code:
    <tr>
    <td colspan="3">PUT THE BUTTON HERE</td>
    <td><input type="number" id="output-value4" readonly="readonly" value="0"></td>
    </tr>
    </table>
    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
    •