入力値にテキストを表示するJavascript関数

Question

入力フィールドに値 "20"を入力すると "ありがとう"というメッセージが表示されます。

$(document).ready(function(){ 

    var money = 20; 

    /* not sure if this is written correctly, but this is supposed to 
    check whether the hidden input element value is equal to var money */ 

    if ($("input[id='nominal']").val() == money) { 

    var h = document.createElement("H1")    // Create a <h1> element 
    var t = document.createTextNode("Thank You");  // Create a text node 
    h.appendChild(t);         // Append the text to <h1> 

    }; 
}); 

私は私が必要なものを満たすために、ひとつのスクリプトを作成しました

が、動作していない：

<form method="post" action=""> 
<input type="text" id="nominal" value=""> 
<input type="submit" value="submit"> 
</form> 

はここに私のJSコードです：

は、ここに私のHTMLコードです！どうしましたか？あなたはこの場合changedには、変更のためのリスニングにイベントを作成する必要が

My JDFIDDLE LINK

Answer 1

。そして、コードを少し小さくすることもできます。 ;）

$(function() { 
    $("#nominal").change(function() { 
     if($(this).val() == 20) 
      $(this).after("<h1>Thank You</h1>"); 
    }); 
}); 

再びメッセージときに値が変化を除去し、厳しいチェックがseen hereことができるとの完全な作業exaple。

Answer 2

$(document).ready(function(){ 
 
    var money = 20; 
 
    $("#nominal").change(function() { // take change event of input box 
 
     if ($(this).val() == money) { // use $(this) to take value 
 
      var h = document.createElement("H1"); // Create a <h1> element 
 
      var t = document.createTextNode("Thank You"); // Create a text node 
 
      h.appendChild(t);  
 
      $('form').append(h); // append created h1 element in form/html 
 
     } else { 
 
      $('form').find("h1").remove(); 
 
     } 
 
    }) 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<form method="post" action=""> 
 
<input type="text" id="nominal" value=""> 
 
<input type="button" value="submit" name="submit" id="submit"> 
 
</form>