Avatar of Member_2_1242703
Member_2_1242703

asked on 

(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.
JavaScriptHTMLAJAX

Avatar of undefined
Last Comment
Member_2_1242703
Avatar of Rob
Rob
Flag of Australia image

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

ASKER CERTIFIED SOLUTION
Avatar of Rob
Rob
Flag of Australia image

Blurred text
THIS SOLUTION IS ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
See Pricing Options
Start Free Trial
Avatar of Member_2_1242703
Member_2_1242703

ASKER

Works like a charm. Nice catch. Thanks Rob!
JavaScript
JavaScript

JavaScript is a dynamic, object-based language commonly used for client-side scripting in web browsers. Recently, server side JavaScript frameworks have also emerged. JavaScript runs on nearly every operating system and in almost every mainstream web browser.

127K
Questions
--
Followers
--
Top Experts
Get a personalized solution from industry experts
Ask the experts
Read over 600 more reviews

TRUSTED BY

IBM logoIntel logoMicrosoft logoUbisoft logoSAP logo
Qualcomm logoCitrix Systems logoWorkday logoErnst & Young logo
High performer badgeUsers love us badge
LinkedIn logoFacebook logoX logoInstagram logoTikTok logoYouTube logo