Javascript 绑定 switch 的 case 到 html 按钮答案

【问题标题】：Javascript binding switch's case to a html buttonJavascript 绑定 switch 的 case 到 html 按钮
【发布时间】：2017-01-02 17:47:34
【问题描述】：

我一直在尝试制作一个可以从 switch 调用 JavaScript 案例的按钮。我尝试创建的脚本应该计算正方形的周长和面积，但它似乎不起作用。

<html>
<body>
<form>
<input type=text id="num"><br>
<input type="button" value="area" id="abut" onclick=" return calc(this.value)">
<input type="button" value="per" id="pbut" onclick=" return calc(this.value)">
</form>
<script>
function calc(count) {
    var a =parseInt(document.getElementById("num").value);
    var w;
    if isNaN(a) {
        alert("Input a number");
    }
    else {
        switch(count) {
            case 'area' :
                w=a*a;
                break;
            case 'per' :
                w=a*4;
                break;
        }
        document.getElementById("res").innerHTML = w;
    }
}
</script>
<p id="res"></p>
</body>
</html>

【问题讨论】：

标签： javascript html function button switch-statement

【解决方案1】：

拼写错误：if isNaN(a) 必须在括号之间。应该是if (isNaN(a))

function calc(count) 
{
    var a = parseInt(document.getElementById("num").value);
    var w;

    if (isNaN(a)) 
    {
        alert("Input a number");
    } 
    else 
    {
        switch (count) 
        {
            case 'area':
                w = a * a;
                break;
            case 'per':
                w = a * 4;
                break;
        }

        document.getElementById("res").innerHTML = w;
    }
}

<html>

<body>
  <form>
    <input type=text id="num">
    <br>
    <input type="button" value="area" id="abut" onclick=" return calc(this.value)">
    <input type="button" value="per" id="pbut" onclick=" return calc(this.value)">
  </form>
  <p id="res"></p>
</body>

</html>

【讨论】：

【解决方案2】：

您忘记在if 语句中的条件周围加上括号。

  if isNaN(a)

应该是

  if (isNaN(a))

【讨论】：

【解决方案3】：

<html>
<body>
<head>
<script>
function calc(count)
{
var a =parseInt(document.getElementById("num").value);
var w;
if (isNaN(a))
{
alert("Input a number");
}
else
{
switch(count)
{
case 'area' :
w=a*a;
break;
case 'per' :
w=a*4;
break;
}
document.getElementById("res").innerHTML = w;
}}
</script>

</head>
<form>
<input type=text id="num"><br>
<input type="button" value="area" id="abut" onclick=" return calc(this.value)">
<input type="button" value="per" id="pbut" onclick=" return calc(this.value)">
</form>
<p id="res"></p>
</body>
</html>

【讨论】：

你能解释一下吗？
如您所见：if isNaN(a) 更改为if (isNaN(a))。每当你对脚本感到疑惑时，只要在浏览器中打开开发者工具，这个开发者工具就会清楚地显示出这样的语法错误。在谷歌 Crome 中：更多工具 -> 开发者工具。