シンプルなJS電卓 - なぜこのif文は機能しませんか？

Question

トピックが私のoriginal postと若干異なるので、これを別の質問として投稿することにしました。人間の年を犬の年に変換する簡単な電卓を作ろうとしています。ユーザーは年齢をフォームに入力するよう求められます。その後、ボタンをクリックすると、犬の年齢がフォームの下に表示されます。

これで問題なく動作しましたが、空文字列または数字0でフォームが送信されないようにするif文を追加しようとしています。ボタンをクリックすると、犬の年に0であることが伝えられます。代わりに、ユーザーに年齢を入力するように指示するメッセージ（同じ場所、フォームの下）を表示したいと思います。

HTML：：ここで

は、私がこれまで持っているコードです

<div id="calculator"> 
     <form> 
     <p> 
     <label>What is your current age in human years?</p> 
     <p><input type="text" id="humanYears"></label></p> 
     <p> 
     <button type="button" id="calculate">Calculate</button></p> 
     <p> 
     <span id="answer"></span> 
     </p> 
     </form> 
    </div> 

JS：

function calculateAge() { 
    var humanYears = document.getElementById("humanYears").value; 
    if (humanYears === 0 || "") { 
     document.getElementById("answer").innerHTML = "Please enter your age in human years."; 
     return; 
    } 

    var dogYears=humanYears * 7; 

    document.getElementById("answer").innerHTML = "That means you are " + dogYears + " in dog years!"; 
} 

document.getElementById("calculate").onclick = function() { calculateAge(); }; 

任意の助けいただければ幸いです。

Answer 1

あなたはまだそれはそうのような文字列のように扱われているようにもあなたは、引用符で番号0を配置する必要があり、両側に完全な表現を追加する必要が||や演算子を使用して：

Working example

あなたが範囲（例えば、年齢1〜999）と一致する場合は、次の操作を行うことができます

if (humanYears === "0" || humanYears === "") { 
    document.getElementById("answer").innerHTML = "Please enter your age in human years."; 
    return; 
} 

Answer 2

：

function calculateAge() { 
 
    var humanYears = document.getElementById("humanYears").value.trim(); 
 
    if (!humanYears.match(/^[1-9][0-9]?[0-9]?$/) || humanYears === '') { 
 
     document.getElementById("answer").innerHTML = "Please enter your age in human years."; 
 
     return; 
 
    } 
 

 
    var dogYears=humanYears * 7; 
 

 
    document.getElementById("answer").innerHTML = "That means you are " + dogYears + " in dog years!"; 
 
} 
 

 
document.getElementById("calculate").onclick = function() { calculateAge(); };

<div id="calculator"> 
 
     <form> 
 
     <p> 
 
     <label>What is your current age in human years?</p> 
 
     <p><input type="text" id="humanYears"></label></p> 
 
     <p> 
 
     <button type="button" id="calculate">Calculate</button></p> 
 
     <p> 
 
     <span id="answer"></span> 
 
     </p> 
 
     </form> 
 
    </div>

それ以外は提案"Please enter your age in human years."

Answer 3

ソリューションは、まだいくつかのなdownfallsを持っていることが、あなたの文字列を返します。例えば、私は手紙を入力することができます、私は複数のスペースを入力することができますテック。

var humanYears = document.getElementById("humanYears").value.trim(); 
    if (!humanYears || isNaN(humanYears)) { 
     document.getElementById("answer").innerHTML = "Please enter your age in human years."; 
     return; 
    } 

Answer 4

あなたはほとんどそれを持っていました。

document.getElementById("humanYears").value;を実行すると、数字ではなく文字列が返されます。

if (humanYears === 0 || "")を実行しているときに、文字列と数値を比較するとfalseが返されます。あなたのトリプル・イコールをダブル・イコールにするだけでうまくいくはずです。 === - >==

希望します。