Question

我的问题是为什么当我点击按钮时，唯一显示的是这个“价目表”，其中包含变量的所有其他行都被省略了。

function showmessage() {
    var sendcost, totalcost;
    if (document.pricelist.total.value<11) {
        sendcost = 3; 
    }   
    else {
        sendcost = 2; 
    }   
    if (document.pricelist.option.checked) {
        sendcost = parseInt(document.pricelist.option.value) + parseInt(sendcost);
    }
    totalcost = parseInt(sendcost) + parseInt(document.pricelist.total.value);

    document.write("Pricelist","</br>");
    document.write("Products price: "+document.pricelist.total.value+"</br>");
    document.write("Send fee: "+sendcost+"</br>");
    document.write("Total cost: "+totalcost+"</br>");
}

<form name="pricelist">
Tuna Salad = 4 <input type="checkbox" name="choice" value="4" onchange="checkTotal()" /></br>
Pasta = 13 <input type="checkbox" name="choice" value="13" onchange="checkTotal()" /></br>
Milk = 3 <input type="checkbox" name="choice" value="3" onchange="checkTotal()" /></br>
Chocolate = 2 <input type="checkbox" name="choice" value="2" onchange="checkTotal()" /></br>
Same day delivery<input type="checkbox" name="option" value="5" /></br>
Total: <input type="text" size="2" name="total" value="0"/>
<input type="button" value="Procceed to checkout" onclick='return showmessage();' />

Answer 1

显示“产品价格：”后停止工作的原因是由于下两行代码的语法错误。

更新：

document.write("Send fee: "+sendcost+"</br>);
document.write("Total cost: "+totalcost+"</br>;

为：

document.write("Send fee: "+sendcost+"</br>");
document.write("Total cost: "+totalcost+"</br>");

同时更新：

document.write("Pricelist","</br>");

为：

document.write("Pricelist</br>");

然后将格式错误的</br>标记修复为<br />

Answer 2

document.write在页面加载后调用时会破坏整个页面，因此将不再有名称为pricelist的表单，因此document.pricelist.total.value将导致Uncaught TypeError: Cannot read property 'total' of undefined，这会导致脚本终止过早。

我建议使用document.write以外的其他内容。

但要避免当前错误，只需将document.pricelist.total.value的值保存到变量中，然后再将其保存。

var value = document.pricelist.total.value;
document.write("Pricelist","</br>");
document.write("Products price: "+value+"</br>");
document.write("Send fee: "+sendcost+"</br>");
document.write("Total cost: "+totalcost+"</br>");

Answer 3

使用Firebug进行调试。真的很棒的Firefox工具 http://getfirebug.com/

Chrome和Internet Explorer也有一个非常好的内部调试工具按F12打开它。

这些工具可让您直观地进行调试 - 您可以逐步执行每个脚本命令并观察发生的情况

在onClick事件后显示变量显示的问题

3 个答案: