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

【问题标题】：Javascript // printing string from 2 textboxes after click eventJavascript // 在点击事件后从 2 个文本框中打印字符串
【发布时间】：2018-06-08 04:30:20
【问题描述】：

我有一个包含 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);

【问题讨论】：

问题是什么？另外请在代码中告诉我们您的问题是什么
很抱歉。当我在 2 个文本框中输入文本并单击按钮时，文本不会出现在已注册的课程部分中。
嗯，我都改了，但我仍然得到不正确的结果。我的完整 HTML 代码是
你尝试了什么？
请正确说明您的问题。阅读stackoverflow.com/help/how-to-ask

标签： javascript html function button dom-events

【解决方案1】：

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

以下是一个工作演示：

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);

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

【讨论】：

【解决方案2】：

这是因为事件处理程序方法 on('click';,function... 在另一个 main 函数内，并且是 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>

【讨论】：

【解决方案3】：

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

使用attribute equals selector [name=”value”] 选择您想要的元素。

您的最后一个 <section> 元素也缺少其结束标记。

例如

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>

【讨论】：