Javascript // печать строки из 2 текстовых полей после события клика - PullRequest
Новая
       2

Javascript // печать строки из 2 текстовых полей после события клика

0 голосов
/ 08 июня 2018

У меня есть 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);

Ответы [ 3 ]

0 голосов
/ 08 июня 2018

Вы извлекаете значение из первого текстового поля в обоих утверждениях.Таким образом, значение первого текстового поля повторяется.Поскольку оба текстовых поля имеют разные имена, необходимо выбрать их с помощью селектора атрибутов, прежде чем извлекать значения.

Ниже приводится рабочая демонстрация: 

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>
0 голосов
/ 08 июня 2018

Это связано с тем, что методы-обработчики событий on('click';,function... находятся внутри другой функции 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>
0 голосов
/ 08 июня 2018

Когда вы используете ".StudentAndCourseInfo input", вы всегда выбираете один и тот же (первый) вход.

Используйте атрибут , равный селектору [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>
...