2013-04-08 1 views
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> 

выпадающее меню находится в нижней части страницы, так что я использую первый сценарий для того чтобы получить пользователь к началу на странице после выбора одного из параметров и получения общего количества, но оба сценария не работают вместе, я должен удалить один из них для другого, чтобы работать, как заставить оба скрипта работать вместе без каких-либо конфликтов, спасибо.

+0

Что не работает? И что вы подразумеваете под 2 сценариями? Функция onload и функция calc? – styfle

+0

@styfle yeas, я имею в виду функцию onload и функцию calc, функция calc не работает с функцией onload. – Michael

+0

@styfle Мне нужно удалить функцию onload для работы функции calc. – Michael

ответ

1

Вы перекрывая OnChange функцию. Если вы хотите сделать две вещи, а затем поместите их в функцию onchange, не назначайте ее дважды.

Вот примерный код (короткий для краткости).

<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 внизу, чтобы избежать доступа к элементу, который не существует.

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); 
}; 
Смежные вопросы