Question

我有一个包含2个文本框和1个单击的HTML文件。单击按钮将打印出文本框中输入的文本。 HTML文件：

<main>
  <!--Input-->
  <section class="StudentAndCourseInfo">
    <!--Student Info-->
    <p>First Name</p>
    <input type="text" name="firstName">

    <p>Last Name</p>
    <input type="text" name=lastName>

    <button> Capture Name </button>
  </section>

  <!--Output-->
  <section class=registeredCourses ">
                <h2><i><u>Registered Courses</u></i></h2>
</main>

的JavaScript

var main = function() {
  "use strict";

  var addCommentForCaptureName = function() {
    var $newComment = $("<p>");
    var commentText1 = $(".StudentAndCourseInfo input").val();
    var commentText2 = $(".StudentAndCourseInfo input").val();

    if (commentText1 !== "" && commentText2 !== "") {
      $newComment.text(commentText1 + commentText2 + " is registered for the following courses:");
      $(".registeredCourses").append($newComment);
    }
  }

  $(".StudentAndCourseInfo button").on("click", function(event) {
    addCommentForCaptureName();
  });
};

$(document).ready(main);

Answer 1

当您使用".StudentAndCourseInfo input"时，您始终选择相同（第一个）输入。

使用attribute equals selector [name=”value”]选择所需的元素。

此外，您的最终<section>元素缺少其关闭标记。

e.g。

var addCommentForCaptureName = function() {
  var $newComment = $("<p>");
  var commentText1 = $(".StudentAndCourseInfo input[name='firstName']").val();
  var commentText2 = $(".StudentAndCourseInfo input[name='lastName']").val();

  if (commentText1 !== "" && commentText2 !== "") {
    $newComment.text(commentText1 + " " + commentText2 + " is registered for the following courses:");
    $(".registeredCourses").append($newComment);
  }
};

$(".StudentAndCourseInfo button").on("click", function(event) {
  addCommentForCaptureName();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<main>
  <!--Input-->
  <section class="StudentAndCourseInfo">
    <!--Student Info-->
    <p>First Name</p>
    <input type="text" name="firstName">

    <p>Last Name</p>
    <input type="text" name=lastName>

    <button> Capture Name </button>
  </section>

  <!--Output-->
  <section class="registeredCourses">
    <h2><i><u>Registered Courses</u></i></h2>
  </section>
</main>

Answer 2

您从两个语句中的第一个文本框中获取值。因此，第一个文本框的值重复。由于两个文本框都有不同的名称，因此您需要在获取值之前通过属性选择器来定位它们。

以下是一个有效的演示：

＆＃13;

var main = function() {
  "use strict";

  var addCommentForCaptureName = function() {
    var $newComment = $("<p>");
    var commentText1 = $(".StudentAndCourseInfo input[name=firstName]").val();
    var commentText2 = $(".StudentAndCourseInfo input[name=lastName]").val();

    if (commentText1 !== "" && commentText2 !== "") {
      $newComment.text(commentText1 + commentText2 + " is registered for the following courses:");
      $(".registeredCourses").append($newComment);
    }
  }

  $(".StudentAndCourseInfo button").on("click", function(event) {
    addCommentForCaptureName();
  });
};

$(document).ready(main);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<main>
  <!--Input-->
  <section class="StudentAndCourseInfo">
    <!--Student Info-->
    <p>First Name</p>
    <input type="text" name="firstName">

    <p>Last Name</p>
    <input type="text" name=lastName>

    <button> Capture Name </button>
  </section>

  <!--Output-->
  <section class="registeredCourses">
    <h2><i><u>Registered Courses</u></i></h2>
  </section>
</main>

＆＃13;

Answer 3

这是因为事件处理程序方法on('click';,function...位于另一个main函数＆amp;对main函数是私有的。除非调用main，否则事件不会附加到元素。首先通过调用main()触发该方法

此外，似乎不需要将这两个函数放在main方法

中

var main = function() {
  "use strict";

  var addCommentForCaptureName = function() {
    var $newComment = $("<p>");
    var commentText1 = $(".StudentAndCourseInfo input").val();
    var commentText2 = $(".StudentAndCourseInfo input").val();

    if (commentText1 !== "" && commentText2 !== "") {
      $newComment.text(commentText1 + ' ' + commentText2 + " is registered for the following courses:");
      $(".registeredCourses").append($newComment);
    }
  }

  $(".StudentAndCourseInfo button").on("click", function(event) {
    addCommentForCaptureName();
  })
}

main()

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<main>
  <!--Input-->
  <section class="StudentAndCourseInfo">
    <!--Student Info-->
    <p>First Name</p>
    <input type="text" name="firstName">

    <p>Last Name</p>
    <input type="text" name="lastName">

    <button> Capture Name </button>
  </section>

  <!--Output-->
  <section class="registeredCourses">
    <h2><i><u>Registered Courses</u></i></h2>
  </section>
</main>

Javascript //在点击事件后从2个文本框中打印字符串

3 个答案: