Question

我正在制作一个带有某种javascript应用程序的网站。我工作了很长时间，但最终一切都奏效了。因此，当我清理我的所有评论代码时，我刷新了我的网站并再次测试了这个应用程序，但它已经不再适用了。我得到的错误说：

未捕获的SyntaxError：意外的令牌}

此处第13行是错误发生的地方。

<table class="calculator" id="calculator">
        <tr>
            <th>Materiaal</th>
            <th>Waarde(&euro;/kg)</th>
            <th>Hoeveelheid(kg)</th>
            <th>Subtotaal</th>
        </tr>
        <tr>
            <td>IJzer</td>
            <td>0,15</td>
            <td>
                <input type="number" min="0" id="ironinput" onchange=calculator( "iron") onkeyup=calculator( "iron") value=0>
            </td> <!--This is where the error occurs-->
            <td id="ironoutput">0.00</td>
        </tr>

这是我的javascript：

＆＃13;

var materials = ["iron", "copper", "aluminum"];

var iron = 0.15;
var copper = 4.00;
var aluminum = 0.70;

function calculator(material) {
    var input = document.getElementById(material + "input").value;

    switch (material) {
        case "iron":
            document.getElementById(material + "output").innerHTML = (input * iron).toFixed(2);
            break;
        case "copper":
            document.getElementById(material + "output").innerHTML = (input * copper).toFixed(2);
            break;
        case "aluminum":
            document.getElementById(material + "output").innerHTML = (input * aluminum).toFixed(2);
            break;
    }
    document.getElementById("total").innerHTML = getTotal().toFixed(2);
};

function getTotal() {
    var total = 0;
    for (var i = 0; i < materials.length; i++ ) {
        total += Number(document.getElementById(materials[i] + "output").innerHTML);
    }
    return total;
};

＆＃13;

我希望有人可以帮助我，我是网络开发的初学者，所以我希望我能得到一个相对简单的解决方案并解释为什么会这样。谢谢你们。

Answer 1

您可能应该在引号中包含onchange和onkeyup属性：

<input type="number" min="0" id="ironinput" onchange="calculator('iron')" onkeyup="calculator('iron')" value="0" />

Answer 2

这个

<input onchange=calculator( "iron") >

错误，HTML属性定义错误。如果属性值不是NMTOKEN，则必须用括号括起来，所以：

<input onchange='calculator( "iron")' >

检查https://html.spec.whatwg.org/multipage/syntax.html#syntax-attributes

Answer 3

附上您的活动属性：

<input type="number" min="0" id="ironinput" onchange="calculator('iron');" onkeyup="calculator('iron');" value="0" />

函数不必以分号结尾：

function foo() {
  console.log('foo');
}

函数表达式（避免副作用）：

var foo = function() {
  console.log('foo');
};

您也不需要keyup和change事件。

工作示例：https://jsfiddle.net/wtwx8vbj/

为什么我会得到一个意外的令牌？

3 个答案: