Question

我是一个总的菜鸟，几天前才开始学习JS。我对html和css有点熟悉。我创建此代码作为练习。它告诉我们表格中的数字是正数，负数还是0.我还希望它列出所有使用的数字。但是，我不希望应用程序列出结果（例如＆＃34;正数＆＃34;）如果有人错误地点击＆＃34;检查＆＃34;在输入另一个号码之前。我唯一的解决方案是在每个条件之后添加document.create.element部分。但我觉得应该有一个更简单的方法，是否可以只使用一次，然后在剩下的两个条件语句中为它调用一种快捷方式？

＆＃13;

<!DOCTYPE html>
<html>

<head>
    <title>What number is it?</title>
</head>

<body>
    <input type="text" name="numer" id="number">
    <button onclick="calculate()" id="przycisk">Check</button>
    <div id="div1"></div>
    <script>
        function calculate() {
            var num = document.getElementById("number").value;
            if (num > 0) {
                var para = document.createElement("p");
                var node = document.createTextNode(num);
                para.appendChild(node);
                var element = document.getElementById("div1");
                element.appendChild(para);
                number.value = "Positive number";
            }
            if (num == 0) {
                var para = document.createElement("p");
                var node = document.createTextNode(num);
                para.appendChild(node);
                var element = document.getElementById("div1");
                element.appendChild(para);
                number.value = 0;
            }
            if (num < 0) {
                var para = d ocument.createElement("p");
                var node = d ocument.createTextNode(num);
                para.appendChild(node);
                var element = d ocument.getElementById("div1");
                element.appendChild(para);
                number.value = "Negative number";
            }
        }
    </script>
</body>

</html>

＆＃13;

Answer 1

我想你想要下面的东西。我刚删除了所有重复的代码，如果按用户输入值是数字，则只调用一次，并删除if/else。（如下所示）

function calculate() {
  var num = document.getElementById("number").value;
  if(!isNaN(num)){
    number.value = (num > 0) ? "Positive number" 
                  :(num < 0) ? "Negative number"
                  : "0";
    
    var para = document.createElement("p");
    var node = document.createTextNode(num);
    para.appendChild(node);
    var element = document.getElementById("div1");
    element.appendChild(para);
  }
}

<!DOCTYPE html>
<html>

<head>
    <title>What number is it?</title>
</head>

<body>
    <input type="text" name="numer" id="number">
    <button onclick="calculate()" id="przycisk">Check</button>
    <div id="div1"></div>
</body>

</html>

Answer 2

您永远不应该依赖Javascript的隐式类型转换规则。如果要将变量与数字进行比较，请确保该变量首先是有效数字。

这里是您的代码的更正副本（虽然我同意评论者在输入框中显示结果非常不同寻常）。

＆＃13;

<!DOCTYPE html>

<html>
<head>
	<title>What number is it?</title>

</head>
<body>

<input type="text" name="numer" id="number">
<button onclick="calculate()" id="przycisk">Check</button> 
<div id="div1"></div>

<script>

function calculate() {
    var num = Number(document.getElementById("number").value);

    if (Number.isNaN(num)) {
        // not a number, do nothing
        return;
    }

    var message = "0";

    if (num < 0)
        message = "Negative number";
    else if (num > 0)
        message = "Positive number";

    number.value = message;

    var para = document.createElement("p");
    para.appendChild(document.createTextNode(num));
    document.getElementById("div1").appendChild(para);
}
	

</script>


</body>
</html>

＆＃13;

这样，流程更符合逻辑，无需重复任何代码。

函数中的快捷方式？

2 个答案: