使两个脚本协同工作以生成下拉菜单

Question

i have this HTML code 我有这个HTML代码

<html>
<head>
<script type="text/javascript">
    window.onload = function(){
    document.getElementById("shipping-method").onchange = function(){
        window.scrollTo(0, 0);
    };
};
</script>
<script>
function calc() {
var subtotal = parseFloat(document.getElementById("subtotal").innerHTML.substring(1));
var shipping = parseInt(document.getElementById("shipping-method").value);
if(shipping == 1) {
    var total = subtotal+6.95;
    document.getElementById("shipping").innerHTML = "$"+6.95;
} else {
    var total = subtotal+17.95;
    document.getElementById("shipping").innerHTML = "$"+17.95;
}
document.getElementById("total").innerHTML = "$"+total;
}
</script>
</head>
<body>
<select  onchange="calc()" class="shipping-method" id="shipping-method">
<option value="">-Choose a shipping method-</option>
<option selected="selected" value="1">normal shipping - $6.95</option>
<option value="2">Priority Shipping - $17.95</option>

</select>
<div class="calculations">
<table>

<tbody><tr>
    <td>Subtotal:</td>
    <td id="subtotal">$97.00</td>
</tr>


<tr>
    <td>Shipping:</td>
    <td id="shipping">$6.95</td>
</tr>



<tr class="total">
    <td>Total:</td>
    <td id="total">$103.95</td>
</tr>
</tbody></table>
</div>
</body>
</html>

the dropdown menu is at the bottom of a webpage, so i use the first script to to get the user to the top of the page after selecting one of the options and getting the total, but both scripts don't work together, i have to remove one of them for the other to work, how to make both scripts work together without any conflict, thanks. 下拉菜单位于网页的底部，因此我使用第一个脚本在选择了一个选项并获得了总计之后将用户带到页面顶部，但是两个脚本无法一起使用，我有要删除其中一个以便另一个工作，如何使两个脚本一起工作而没有任何冲突，谢谢。

Answer 1

Try sticking this: 尝试坚持一下：

function calc() {
var subtotal = parseFloat(document.getElementById("subtotal").innerHTML.substring(1));
var shipping = parseInt(document.getElementById("shipping-method").value);
if(shipping == 1) {
    var total = subtotal+6.95;
    document.getElementById("shipping").innerHTML = "$"+6.95;
} else {
    var total = subtotal+17.95;
    document.getElementById("shipping").innerHTML = "$"+17.95;
}
document.getElementById("total").innerHTML = "$"+total;
}

just before the function at the top: 在顶部的函数之前：

window.onload = function(){
document.getElementById("shipping-method").onchange = function(){
    window.scrollTo(0, 0);
};

Answer 2

You are overriding the onchange function. 您将覆盖onchange函数。 If you want to do two things, then put them both in the onchange function, don't assign it twice. 如果您想做两件事，那么将它们都放在onchange函数中，不要分配两次。

Here is some example code (shorted for brevity). 这是一些示例代码（为简洁起见，简称）。

<html>
<head><title>Example</title></head>
<body>
<select id="shipping-method"></select>
<table></table>
<script type="text/javascript">
    function calc() {
        // do calculations here
    }
    document.getElementById("shipping-method").onchange = function(){
        window.scrollTo(0, 0); // scroll to top
        calc(); // call function
    };
</script>
</body>
</html>

Note that I put the javascript at the bottom to avoid accessing an element that does not exist. 请注意，我将javascript放在底部，以避免访问不存在的元素。

使两个脚本协同工作以生成下拉菜单

问题描述

2 个解决方案

解决方案1
1 2013-04-08 23:00:21

解决方案2
1 已采纳 2013-04-08 23:01:11

使两个脚本协同工作以生成下拉菜单

问题描述

2 个解决方案

解决方案1 1 2013-04-08 23:00:21

解决方案2 1 已采纳 2013-04-08 23:01:11

解决方案1
1 2013-04-08 23:00:21

解决方案2
1 已采纳 2013-04-08 23:01:11