Javascript 使两个脚本在下拉菜单中协同工作_Javascript_Css

Javascript 使两个脚本在下拉菜单中协同工作

javascript css

Javascript 使两个脚本在下拉菜单中协同工作,javascript,css,Javascript,Css,我有这个HTML代码 <html> <head> <script type="text/javascript"> window.onload = function(){ document.getElementById("shipping-method").onchange = function(){ window.scrollTo(0, 0); }; }; </script> <script> f

我有这个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>


window.onload=函数（）{
document.getElementById（“装运方法”）.onchange=function（）{
滚动到（0，0）；
};
};
函数计算（）{
var subtotal=parseFloat（document.getElementById（“subtotal”）.innerHTML.substring（1））；
var shipping=parseInt（document.getElementById（“shipping方法”）.value）；
如果（装运==1）{
风险价值总额=小计+6.95；
document.getElementById（“shipping”）.innerHTML=“$”+6.95；
}否则{
风险价值总额=小计+17.95；
document.getElementById（“shipping”）.innerHTML=“$”+17.95；
}
document.getElementById（“总计”）.innerHTML=“$”+总计；
}
-选择一种运输方式-
正常运费-6.95美元
优先装运-17.95美元
小计：
$97.00
航运：
$6.95
总数：
$103.95

下拉菜单位于网页的底部，因此我使用第一个脚本在选择其中一个选项并获取总数后让用户到达页面顶部，但两个脚本不能一起工作，我必须删除其中一个才能让另一个工作，如何使两个脚本一起工作而不产生任何冲突，谢谢

尝试粘贴以下内容：

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;
}

就在顶部的功能之前：

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

您正在重写onchange函数。如果您想做两件事，那么将它们都放在onchange函数中，不要分配两次

下面是一些示例代码（为简洁起见简称）


例子
函数计算（）{
//在这里做计算
}
document.getElementById（“装运方法”）.onchange=function（）{
滚动到（0，0）；//滚动到顶部
calc（）；//调用函数
};

请注意，我将javascript放在底部，以避免访问不存在的元素。

什么不起作用？你说的两个脚本是什么意思？onload函数和calc函数？@styfle是的，我是指onload函数和calc函数，calc函数不能与onload函数一起工作。@styfle我必须删除onload函数才能使calc函数工作。请看我的答案。onload函数是单个函数。赋值两次将覆盖它（就像变量一样）。

<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>