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

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

в чем вопрос? Также сообщите нам, в чем заключается ваша проблема здесь, в коде.

— 08.06.2018 06:32

Извини за это. Когда я ввожу текст в два текстовых поля и нажимаю кнопку, текст не отображается в разделе зарегистрированных курсов.

— 08.06.2018 06:34

Хм, я изменил их все, но все равно получаю неверные результаты. мой полный HTML-код

— 08.06.2018 06:58

Что ты пробовал?

— 08.06.2018 07:16

Пожалуйста, сформулируйте свой вопрос правильно. Прочитать stackoverflow.com/help/how-to-ask

— 14.09.2019 17:53

javascript html function button dom-events

08.06.2018 06:30

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Ответы 3

Когда вы используете ".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>

08.06.2018 06:35

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

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

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>

08.06.2018 06:36

Это связано с тем, что методы обработчиков событий 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>

08.06.2018 06:39

Другие вопросы по теме

Скрыть функцию в форме мастера

JQUERY: подсчет элементов, у которых нет класса

Php foreach вычисление суммы из строки

Как сделать прозрачную навигационную панель на фоновом изображении с наложением?

Зачем показывать контент, используя display none и transition-delay не работает?

Моя ссылка html открывается только при открытии в новой вкладке?

Неоднократно менять цвет фона картинки на MouseOver

Я не могу использовать переключатель

Центрировать изображение на карте

Высота bootstrap img не сохраняет высоту контейнера

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

Ответы 3

Другие вопросы по теме

Похожие вопросы