Javascript 函数在我输入值时显示文本

Question

至此，如果我在输入字段中输入值“20”，则显示消息 "Thank you"。

这是我的 HTML 代码：

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

这是我的 JS 代码：

$(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>

    };
});

我已经创建了一个脚本来满足我的需要，但是没有用！怎么了？

My JDFIDDLE LINK

Answer 1

$(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>

Answer 2

您必须创建一个事件来侦听更改，在本例中为 changed。你也可以让你的代码更小一些。 ;)

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

完整的工作示例，当值再次更改时删除消息并进行严格检查可以是 seen here。

Javascript 函数在我输入值时显示文本

Javascript function to show text if i input value

html

javascript

jquery

dom

user-input