1

私はこの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>

ドロップダウン メニューは Web ページの下部にあるため、最初のスクリプトを使用して、オプションの 1 つを選択して合計を取得した後、ユーザーをページの上部に移動しますが、両方のスクリプトが連携しません。一方を削除してもう一方を機能させるには、両方のスクリプトを競合なく連携させる方法を教えてください。

4

2 に答える 2

1

これを貼り付けてみてください：

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);
};
于 2013-04-08T23:00:21.257 に答える
1

onchange 関数をオーバーライドしています。2 つのことを行いたい場合は、両方を onchange 関数に入れます。2 回割り当てないでください。

以下はコードの例です (簡潔にするために短縮されています)。

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

存在しない要素へのアクセスを避けるために、javascript を一番下に置いていることに注意してください。

于 2013-04-08T23:01:11.630 に答える