Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 242
  • Last Modified:

(Probably easy) Help with javascript

I have a script that works great but I have a slight problem. I've added a new window.onload script outside of the one below, so now only the last one works. How can I run this code without using widow.onload?

<script type="text/javascript">
        window.onload = function calcPer() {
                document.getElementById("lbOverage").onchange = function calcPer() {
                document.getElementById("lblPercentOveralge").innerHTML = this.options[this.selectedIndex].text + '%';
                document.getElementById("lblOverageQty").innerHTML = Math.ceil((this.options[this.selectedIndex].text / 100) * document.getElementById("lblFinalOrderQuantity").innerHTML)
                var x = +document.getElementById("lblFinalOrderQuantity").innerHTML;
                var y = +document.getElementById("lblOverageQty").innerHTML;
                document.getElementById("lblActualProductionQuantity").innerHTML = x + y;
                document.getElementById("lblOverageQty").innerHTML = '(+' + document.getElementById("lblOverageQty").innerHTML + ')'
            }
        }
    </script>

Open in new window


<asp:ListBox ID="lbOverage" runat="server" CssClass="alwaysontop" onChange="calcPer();" Height="85px"

Open in new window


I have tried this:

<script type="text/javascript">
        function calcPer() {
                document.getElementById("lbOverage").onchange = function calcPer() {
                document.getElementById("lblPercentOveralge").innerHTML = this.options[this.selectedIndex].text + '%';
                document.getElementById("lblOverageQty").innerHTML = Math.ceil((this.options[this.selectedIndex].text / 100) * document.getElementById("lblFinalOrderQuantity").innerHTML)
                var x = +document.getElementById("lblFinalOrderQuantity").innerHTML;
                var y = +document.getElementById("lblOverageQty").innerHTML;
                document.getElementById("lblActualProductionQuantity").innerHTML = x + y;
                document.getElementById("lblOverageQty").innerHTML = '(+' + document.getElementById("lblOverageQty").innerHTML + ')'
            }
        }
    </script>

Open in new window


which works, however it does not work on the first selection. When a user makes a list box selection, it does nothing. Once they make a second selection, it runs as expected.
0
Mike Miller
Asked:
Mike Miller
  • 2
1 Solution
 
RobOwner (Aidellio)Commented:
You're defining the onchange twice.  You only need to do it in the ListBox:
I've removed it from the code below
<script type="text/javascript">
function calcPer() {
	document.getElementById("lblPercentOveralge").innerHTML = this.options[this.selectedIndex].text + '%';
	document.getElementById("lblOverageQty").innerHTML = Math.ceil((this.options[this.selectedIndex].text / 100) * document.getElementById("lblFinalOrderQuantity").innerHTML);
	var x = +document.getElementById("lblFinalOrderQuantity").innerHTML;
	var y = +document.getElementById("lblOverageQty").innerHTML;
	document.getElementById("lblActualProductionQuantity").innerHTML = x + y;
	document.getElementById("lblOverageQty").innerHTML = '(+' + document.getElementById("lblOverageQty").innerHTML + ')';
}

    </script>

Open in new window

0
 
RobOwner (Aidellio)Commented:
Demo here; http://jsbin.com/cutodo/1/edit?html,js,console,output

javascript
function calcPer() {
	var me = document.getElementById('lbOverage');
	document.getElementById("lblPercentOveralge").innerHTML = me.options[me.selectedIndex].text + '%';
	document.getElementById("lblOverageQty").innerHTML = Math.ceil((me.options[me.selectedIndex].text / 100) * document.getElementById("lblFinalOrderQuantity").innerHTML);
	var x = +document.getElementById("lblFinalOrderQuantity").innerHTML;
	var y = +document.getElementById("lblOverageQty").innerHTML;
	document.getElementById("lblActualProductionQuantity").innerHTML = x + y;
	document.getElementById("lblOverageQty").innerHTML = '(+' + document.getElementById("lblOverageQty").innerHTML + ')';
}

Open in new window


rendered html used:
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
	<div id='lblPercentOveralge'></div>
	<div id='lblOverageQty'></div>
	<div id='lblFinalOrderQuantity'>5</div>
	<div id='lblOverageQty'>3</div>
	<div id='lblActualProductionQuantity'></div>
<select id="lbOverage" onchange="calcPer()">
	<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>
	
	</select>

</body>
</html>

Open in new window

0
 
Mike MillerSoftware EngineerAuthor Commented:
Works like a charm. Nice catch. Thanks Rob!
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now