アラートが自分の機能の1つで機能しないのはなぜですか？

ユーザーがsubmitにヒットしたときにnameVerification()関数がalert()メッセージをスローするようにします。たとえば、ユーザがnameフィールドに45のような名前を入力した場合、関数内のalertを呼び出すとします。今、ユーザーがnameフィールドに数字を入力すると、formSubmission()関数のalert()が呼び出されています。アラートが自分の機能の1つで機能しないのはなぜですか？

サイドノート： formSubmission機能は完全に機能します。つまり、ユーザがageフィールドに数字< 13を入力すると、機能alert()が問題なく正常に呼び出されます。ユーザーが13を超える数値を入力すると、問題なく動作します。ちょうど私もあなたにもそれを知ってもらえると思った。

signUp.html

<!DOCTYPE html> 
<html> 
<head> 
    <title>Signup Form</title> 
    <script type="text/javascript" src="signUp.js"></script> 
</head> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
<link rel="stylesheet" href="signUp.css"> 
<body> 

<form class="col-md-4 col-md-offset-4" name="formHandler" id="handle"> 
     <div class="moveUsername"> 
      <label for="usr">Name:</label> 
      <input type="field" class="form-control" id="nameVerify" placeholder="Username" required="required">  
     </div> 

     <div class="ageMovement"> 
      <label for="usr" >Age (Must be 13 years or older to play):</label> 
      <input type="field" class="form-control" id="ageVerify" name="ageChecker" placeholder="Age" required="required"> 
     </div> 

     <button type="submit" class="btn btn-default" onclick="formSubmission()" onclick="nameVerification()">Submit</button> 
    </form> 

</body> 
</html>

signUp.js

function nameVerification() { 
    var name = document.getElementById("nameVerify").value; 

    if(typeof name !== 'string') { 
     alert("That's not a name!"); 
    } 
} 

function formSubmission() { 
    var age = document.getElementById("ageVerify").value; 

    if(age < 13) { 
     alert("You're too young, you can't play the game"); 
    } 
}

出典

2016-12-22 reppo

を？ 'onclick =" formSubmission（）; nameVerification（） "' –

また、 'name'変数は常にstring型であるため、nameVerification （）が実行されます。あなたは空の文字列 – IAmDranged

次のようにあなたのnameVerification機能を変更することができます。

関数nameVerification（）{ VAR名=のdocument.getElementById（ "nameVerifyを"）。値;

if (name) { 
     var num = parseInt(name) || -1; 
     if (num >= 0 && num < 13) { 
      alert("That's not a name!"); 
     } 
    } 
}

となるようにHTMLであなたのonclickの値を変更します。

のonclick = "formSubmission（）; nameVerification（）" あなたは2つのonclick属性を持っていない理由

出典

2016-12-22 15:46:01 sjramsay

魅力のように動作します！ありがとう：D。一つのことですが、 '-1'が何のためにあるのか説明してもらえますか？再度、感謝します：）。 – reppo

確かに。チェックの最初の部分は、入力された値をInteger値に解析できるかどうかを調べることができます。解析できない場合、-1はエラーチェックのように動作します。数値でない場合は、-1を返します。 javascriptなどでNaNのように使うことができる他のチェックがありますが、これは簡単に思えました。 -1を返すと、数字ではなくテキストが入力されます。 – sjramsay

Gotcha、おかげで束：D – reppo

ageもこの機能でstringです：

function formSubmission() { 
    var age = document.getElementById("ageVerify").value; 

    if(age < 13) { 
     alert("You're too young, you can't play the game"); 
    } 
}

あなたが比較数値を行いたい場合は、あなた最初に解析する必要があります：

function formSubmission() { 
    var age = document.getElementById("ageVerify").value; 

    if (age) { 
     var ageInteger = parseInt(age, 10); 

     if (ageInteger < 13) { 
      alert("You're too young, you can't play the game"); 
     } 
    } 
}

出典

2016-12-22 15:30:20

これは、JavaScriptがまだ読み込まれていないためです。

移動：ちょうど</body>タグ以上に

<script type="text/javascript" src="signUp.js"></script>

。

出典

2016-12-22 15:31:48 Arnold

あなたが唯一のあなたはparseIntは使用すべき1

出典

2016-12-22 15:32:06

オハイオ州を確認する必要があります。私は、これらのエラーを引き起こす可能性のある同じ送信ボタンである場合、2つのonclick属性を持つ必要があるかもしれないロジックを使用しました。 – reppo

残念ながら、あなたは1つしか持てません。だからnameVerification（）は実際に呼び出されることはありません –

持つことができるボタン

<button type="submit" class="btn btn-default" onclick="formSubmission()" onclick="nameVerification()">Submit</button>

上に2つのonclick属性があります値から返されたので、あなたのtypeofテストが失敗している

var age = parseInt(document.getElementById("ageVerify").value);

出典

2016-12-22 15:35:18 Mik

をテキスト入力は常にstring型です。あなたが提供されたテキスト値は、以下の機能を備えた数値であるかどうかをテストすることができます。

function isNumeric(n) { 
    return !isNaN(parseFloat(n)) && isFinite(n); 
}

本当の答えを、しかし、あなたがをしたいか決定するためにあなたの入力の検証テストを改善する必要がありますということですすべてのものをテストするのではなく、は望ましくないです。たとえば、誰かが "t @ ^！"と入力した場合、上記のような数値のテストは機能しません。このフィールドには、名前フィールドに必要な値ではない可能性があります。これは、regular expressionsフィールドとbuilt-in validations from HTMLフィールドが役立つところです。

出典

2016-12-22 15:41:16 darthtaco

アラートが自分の機能の1つで機能しないのはなぜですか？

答えて

関連する問題