0

こんにちは、私はこれにかなり慣れていないので、この送料計算コードを機能させようとしています。これは私がこれまでに持っているものです。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
ent"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Calculate Shipping</title>
<script type="text/javascript">
/* <![CDATA[ */
var price = 0;
var shipping = (calculateShipping(price););
var total = price + shipping;

function calculateShipping(price){
    if (price <= 25){
        return 1.5;
    }
    else {
        return price * 10 / 100;
        break;
    } 
}

window.alert("Your total is $" + total + ".");

/* ]]> */
</script>
</head>
<body>
<form name="shipping" action="">
    <p>Purchase Price: $
        <input type="text" name="price" />
        <input type="button" value="Calculate Shipping" onclick="calculateshipping(price);" />
    </p>
</form>
</body>
</html>
4

2 に答える 2

1

onclick コードを次のように変更します。

calculateShipping(document.getElementById('price').value);

編集して、このコードを試してください。動作するはずです:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"       ent"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Calculate Shipping</title>

<script type="text/javascript">
/* <![CDATA[ */
var price = 0;
var shipping = calculateShipping(price);

function calculateShipping(price){
var result = 0;
if (price <= 25){
    result = 1.5;
}
else{
    result = price * 10 / 100;
}
var total = result + (price - 0);
window.alert("Shipping is $" + result + ".  Total is $" + total +".");
} 

/* ]]> */
</script>
</head>
<body>
<p>Purchase Price: $
<input type="text" name="price" id="price" />
<input type="button" value="Calculate Shipping" onclick="calculateShipping(document.getElementById('price').value);" /></p>
</body>
</html>
于 2012-09-30T03:42:54.020 に答える
1

(JQueryなどのライブラリを使用せずに)最善のアプローチは次のとおりだと思います。

<!DOCTYPE html>
<html>
<head>
<title>Calculate Shipping</title>
<script type="text/javascript">

window.addEventListener('load', function(){
  var priceField = document.getElementById('price');
  var calculateButton = document.getElementById('calculate');
  var totalField = document.getElementById('total');

  calculateButton.addEventListener('click', function(){
    var price = parseInt(priceField.value);
    var shipping = calculateShipping(price);
    var total = price + shipping;

    totalField.value = "Your total is $" + total + ".";
  });

  function calculateShipping(price){
    return (price <= 25) ? 1.5 : price / 10;
  }
});


</script>
</head>
<body>

<h1>Purchase Price:</h1>

<label>Price:</label><input type="text" id="price" />
<button id="calculate">Calculate Shipping</button>

<label>Total:</label>
<input type="text" id="total" disabled="disabled" />

</body>
</html>

ここでは、次のようないくつかの優れたプラクティスを紹介します。

  • グローバル名前空間を汚染しない
  • インライン Javascript を避ける (イベント リスナーを HTML 属性としてバインドする)
  • 可能であれば、ネイティブ メッセージ ボックス (アラート、確認、プロンプトなど) の使用は避けてください。
于 2012-09-30T04:31:13.973 に答える