Solved

(Probably easy) Help with javascript

Posted on 2014-11-29
3
185 Views
Last Modified: 2014-11-29
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
Comment
Question by:mwmiller78
  • 2
3 Comments
 
LVL 42

Expert Comment

by:Rob Jurd, EE MVE
ID: 40472028
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
 
LVL 42

Accepted Solution

by:
Rob Jurd, EE MVE earned 500 total points
ID: 40472034
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
 

Author Closing Comment

by:mwmiller78
ID: 40472037
Works like a charm. Nice catch. Thanks Rob!
0

Featured Post

Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

Join & Write a Comment

Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

757 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

24 Experts available now in Live!

Get 1:1 Help Now