运输计算器，我在此代码中缺少什么使其工作？

Question

Hello I am pretty new to this and I am trying to make this shipping calculator code work. 您好我是新手，我正在尝试使这个运费计算器代码工作。 This is what I have so far. 这就是我到目前为止所拥有的。

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

Answer 1

Change your onclick code to: 将您的onclick代码更改为：

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

Edit, try this code, it should work: 编辑，尝试此代码，它应该工作：

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

Answer 2

I think the best approach (without using any library, like JQuery) is the following: 我认为最好的方法（不使用任何库，如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>

here I introduce some good practices, like: 这里我介绍一些好的做法，比如：

Don't pollute the global namespace 不要污染全局命名空间
Avoid inline Javascript (binding your event listeners as HTML attributes) 避免内联Javascript（将您的事件侦听器绑定为HTML属性）
Avoid, if possible, the use of native message boxes (alert, confirm, prompt...), they're terribly intrusive, ugly and not customizable. 如果可能的话，避免使用本机消息框（警报，确认，提示......），它们非常具有侵入性，丑陋且无法自定义。

运输计算器，我在此代码中缺少什么使其工作？

问题描述

2 个解决方案

解决方案1
1 已采纳 2012-09-30 03:42:54

解决方案2
1 2012-09-30 04:31:13

运输计算器，我在此代码中缺少什么使其工作？

问题描述

2 个解决方案

解决方案1 1 已采纳 2012-09-30 03:42:54

解决方案2 1 2012-09-30 04:31:13

解决方案1
1 已采纳 2012-09-30 03:42:54

解决方案2
1 2012-09-30 04:31:13