为什么不能读入输入值并显示警报?

时间:2018-11-14 12:34:25

标签: javascript jquery debugging

我已经查过并尝试了,但是没有用。如果用户在输入字段中提交了a,那么它应该提醒it works,但是由于某种原因它不起作用。

我在做什么错,我该如何解决?

$(function() {
  var $list, $newItemForm;
  $list = $('ul');
  $newItemForm = $("newItemForm");

  $newItemForm.on('submit', function(e) {
    e.preventDefault();
    // var text = $('input:text').val();
    var text = $('itemField').val();
    console.log(text);
    $list.append('<li>' + text + '</li>');
    // $('input:text').val('');

    if (text == "a") {
      alert("it works");
    }
  });

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="newItemForm">
  <input type="text" id="itemField" placeholder="item" />
  <input type="submit" id="add" value="add" />
</form>

2 个答案:

答案 0 :(得分:1)

在引用格式(#)和变量中的输入值($("newItemForm"))时,您忘记了选择器中的$('itemField').val()前缀:

$(function() {
  var $list, $newItemForm;
  $list = $('ul');
  $newItemForm = $("#newItemForm");

  $newItemForm.on('submit', function (e) {
      e.preventDefault();
      // var text = $('input:text').val();
      var text = $('#itemField').val(); 
      console.log(text);
      $list.append('<li>' + text + '</li>');
      // $('input:text').val('');

      if(text == "a") {
          alert("it works");
      }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="newItemForm">
    <input type="text" id="itemField" placeholder="item"/>
    <input type="submit" id="add" value="add"/>
</form>

答案 1 :(得分:0)

我认为问题出在“ newItemForm”和“ itemField”的选择器上。

在jQuery中,当您想按ID选择元素时,需要在#字符前加上

代码应如下:

$(function() {
var $list, $newItemForm;
$list = $('ul');
$newItemForm = $("#newItemForm"); // Remember to use # to select by ID.

$newItemForm.on('submit', function (e) {
    e.preventDefault();
    // Get value from item field.
    var text = $('#itemField').val(); // Use # here as well.
    // Clear the item field.
    $('#itemField').val('');
    console.log(text);
    $list.append('<li>' + text + '</li>');

    if(text == "a") {
        alert("it works");
    }
});

});

如果您不使用#,则jQuery会期望以下元素类型,例如ul或span等。如果要按班级选择,则需要在前面加一个。在类名前面,例如“ .classname”。

我希望这会有所帮助。