Question

我用javascript做了一个简单的计算器，但是当我想验证输入时，它显示Nan，如果语句不能验证空输入？如何解决此问题以及如何通过此表单验证空输入以及如何删除提交空输入后显示的Nan文本？

let b = document.querySelector("#submit");
b.addEventListener("click", function() {

let c = document.querySelector("#plus").value;
let d = document.querySelector("#minus").value;
let result = document.querySelector(".result");
 let output = parseInt(c) + parseInt(d);
result.innerHTML = output;
if(c.value == ""  && d.value == "") {
console.log("Wrong");
}

else {
console.log("Well Typed");
}
}
)

body {
 display:flex;
 align-items:center;
 background-color:white;
 justify-content:center;
 font-family:"Montserrat",sans-serif;
 flex-direction:column;
}
button {
  background-color:#232324;
  border:none;
  color:white;
  padding:10px 17px;
}


.result {
width:50%;
min-height:50px;
background-color:transparent;
display:flex;
align-items:center;
justify-content:center;
flex-direction:row;
}

input {
margin: 20px 0;
padding:10px;
color:black;
background-color:lightgray;
border:none;
}

<body>
<input type="number" placeholder = ""id  = "plus">
<input type="number" id  = "minus">
<div class="row">
<button id="submit">
+
</button>
<button id="submit">
-
</button>
<button id="submit">
x
</button>
<button id="submit">
÷
</button>
</div>

<span class="result">1</span>
</body>

Answer 1

以下行已获取value元素的#plus。

let c = document.querySelector("#plus").value;

因此，在if()语句中，无需再次调用.value；

# wrong
if(c.value == ""  && d.value == "") {

#improved
if(c == "" || d == "") {

改进的代码段;

let b = document.querySelector("#submit");
b.addEventListener("click", function() {

    let c = document.querySelector("#plus").value;
    let d = document.querySelector("#minus").value;

    if (c == "" || d == "") {
        console.log("Wrong");
    } else {
        console.log("Well Typed");
        let result = document.querySelector(".result");
        let output = parseInt(c) + parseInt(d);
        result.innerHTML = output;
    }
});

body {
    display:flex;
    align-items:center;
    background-color:white;
    justify-content:center;
    font-family:"Montserrat",sans-serif;
    flex-direction:column;
}
button {
    background-color:#232324;
    border:none;
    color:white;
    padding:10px 17px;
}

.result {
    width:50%;
    min-height:50px;
    background-color:transparent;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-direction:row;
}

input {
    margin: 20px 0;
    padding:10px;
    color:black;
    background-color:lightgray;
    border:none;
}

<body>
    <input type="number" placeholder="" id="plus">
    <input type="number" id="minus">
    <div class="row">
        <button id="submit">
            +
        </button>
        <button id="submit">
            -
        </button>
        <button id="submit">
            x
        </button>
        <button id="submit">
            ÷
        </button>
    </div>
    <span class="result">1</span>
</body>

小笔记；

我将&&（和）更改为||（或），因为1个空输入应为“无效”
HTML ID是唯一的，您不能有多个<button id="submit">（Read more info）

Answer 2

let b = document.querySelector("#submit");
b.addEventListener("click", function() {

  let c = document.querySelector("#plus").value;
  let d = document.querySelector("#minus").value;
  
  if(c !== "" && d !== ""){
    let result = document.querySelector(".result");
    let output = parseInt(c) + parseInt(d);
    result.innerHTML = output;
      console.log("Well Typed");
  }
  else{
     console.log("Wrong");
  }
}
)

body {
 display:flex;
 align-items:center;
 background-color:white;
 justify-content:center;
 font-family:"Montserrat",sans-serif;
 flex-direction:column;
}
button {
  background-color:#232324;
  border:none;
  color:white;
  padding:10px 17px;
}


.result {
width:50%;
min-height:50px;
background-color:transparent;
display:flex;
align-items:center;
justify-content:center;
flex-direction:row;
}

input {
margin: 20px 0;
padding:10px;
color:black;
background-color:lightgray;
border:none;
}

<body>
<input type="number" placeholder = ""id  = "plus">
<input type="number" id  = "minus">
<div class="row">
<button id="submit">
+
</button>
<button id="submit">
-
</button>
<button id="submit">
x
</button>
<button id="submit">
÷
</button>
</div>

<span class="result">1</span>
</body>

Answer 3

let b = document.querySelector("#submit");
b.addEventListener("click", function() {

let c = document.querySelector("#plus").value;
let d = document.querySelector("#minus").value;
let result = document.querySelector(".result");
let output = parseInt(c) + parseInt(d) || "";

if(c == ""  && d == "") {
  console.log("Wrong");
}else {
  console.log("Well Typed");
}
  result.innerHTML = output;

})

body {
 display:flex;
 align-items:center;
 background-color:white;
 justify-content:center;
 font-family:"Montserrat",sans-serif;
 flex-direction:column;
}
button {
  background-color:#232324;
  border:none;
  color:white;
  padding:10px 17px;
}


.result {
width:50%;
min-height:50px;
background-color:transparent;
display:flex;
align-items:center;
justify-content:center;
flex-direction:row;
}

input {
margin: 20px 0;
padding:10px;
color:black;
background-color:lightgray;
border:none;
}

<body>
<input type="number" placeholder = ""id  = "plus">
<input type="number" id  = "minus">
<div class="row">
<button id="submit">
+
</button>
<button id="submit">
-
</button>
<button id="submit">
x
</button>
<button id="submit">
÷
</button>
</div>

<span class="result">1</span>
</body>

Answer 4

我为此代码做了一个if语句当第一个输入有值而第二个输入无值时有什么建议？

if (c == "" && d == "") {
    console.log("Wrong");
    error.innerHTML = "<h1>Write Number Please>/h1> ";
  } 
  else if(c == "" && d >=0  ||  c>= 0 &&  d=="") {
  console.log("write value for all inputs");
  }
  else {
    console.log("Well Typed");
    result.innerHTML = output;
  }
})

空输入验证不起作用？

4 个答案: