javascript - HTML 和 JavaScript 代码审查

标签 javascript html function

看看我的代码,当函数total_Cost();时我没有得到结果。被称为“我不明白为什么这会发生在我身上”。

function total_Cost()
{
    var x = document.getElemenById('1');
    var y = document.getElemenById('2');
    var z = document.getElemenById('3');
    var s = document.getElemenById('cost');
    s.value = (x.value * 3.49) + (y.value * 3.60) + (z.value * 4.49);
}
<body>
    <h2>Coffee Order Form</h2>
    <form method='get'>
        <table border="1" cellpadding='0px' cellspacing='0px'>
            <tr><th>Product Name </th><th>Price</th><th>Quantity</th></tr>
            <tr><td>French Vanilla (1 lb)</td><td>$3.49</td><td><input type = "text" size='5'id='1' value=''></td></tr>
            <tr><td>Hazelnut Cream (1 lb)</td><td>$3.60</td><td><input type = "text" size='5'id='2' value=''></td></tr>
            <tr><td align='centre'>Colombian (1 lb)</td><td>$4.49</td><td><input type = "text" size='5' id='3' value=''></td></tr>
        </table>
        <br>
        <input type='button' Value='Total Cost' id='total' onclick='return total_Cost();'> &nbsp;<input type = "text" size='10' id='cost' value=''>
        <br>
        <br>
        <input type='submit' Value='Submit Order'> &nbsp; <input type='submit' Value='Clear Order Form'>
    </form>
</body>

最佳答案

除了一些拼写错误之外,主要问题是您不需要从 onclick 函数返回。

但是,我建议您在这种情况下使用事件监听器以避免混淆。

function total_Cost() {
    var x = document.getElementById('1');
    var y = document.getElementById('2');
    var z = document.getElementById('3');
    var s = document.getElementById('cost');
    s.value = (x.value * 3.49) + (y.value * 3.60) + (z.value * 4.49);
}
<body>
    <h2>Coffee Order Form</h2>
    <form method='get'>
        <table border="1" cellpadding='0px' cellspacing='0px'>
            <tr><th>Product Name </th><th>Price</th><th>Quantity</th></tr>
            <tr><td>French Vanilla (1 lb)</td><td>$3.49</td><td><input type = "text" size='5'id='1' value=''></td></tr>
            <tr><td>Hazelnut Cream (1 lb)</td><td>$3.60</td><td><input type = "text" size='5'id='2' value=''></td></tr>
            <tr><td align='centre'>Colombian (1 lb)</td><td>$4.49</td><td><input type = "text" size='5' id='3' value=''></td></tr>
        </table>
        <br>
        <input type='button' Value='Total Cost' id='total' onclick='total_Cost();'> &nbsp;<input type = "text" size='10' id='cost' value=''>
        <br>
        <br>
        <input type='submit' Value='Submit Order'> &nbsp; <input type='submit' Value='Clear Order Form'>
    </form>
</body>

关于javascript - HTML 和 JavaScript 代码审查,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27305786/

相关文章:

javascript - 如何在使用 Javascript 提交之前调整 Django Imagefield 中的图像大小

javascript - 应该是交互式的功能,但它只能运行一次

python - 如何在不导入的情况下从python文件中获取函数

javascript - 使用 javascript 将剪贴板中的图像粘贴到 acrobat 表单中

php - AJAX 没有响应

javascript - 无法让 === string.length 正常工作

javascript - HTML onclick div id 转到两个 href

javascript - Mootools:获取被点击的元素值

Python 如果 N 个变量中有一个以上为真

c++ - 如何将参数传递给函数?