Для школьной домашней работы я создаю одну страницу с другим учеником. Наш учитель дал нам HTML-файл для клонирования некоторых компонентов нашего собственного проекта, чтобы нам не пришлось писать его с нуля. Мы хотим создать наш собственный файл .js с некоторыми слушателями для компонентов, которые мы берем из ее файла.
Приведенный ниже код создает метку под названием «ключевые слова» со значком вопросительного знака справа и текстовым полем справа. Щелчок по значку вопросительного знака открывает всплывающее окно с некоторыми параметрами, а текстовое поле допускает разделенные запятыми строки в качестве «ключевых слов». Наша проблема в том, что на нашей HTML-странице все эти элементы отображаются без проблем, но всплывающее окно не отображается, когда мы нажимаем на значок вопросительного знака, и текстовое поле также не активируется, когда мы нажимаем на него.
Мы посмотрели HTML-файл нашего учителя и немного поиграли на нем. Мы выяснили, что когда мы удаляем ее js-файл как скрипт, то же самое происходит и с ее HTML-файлом. Поэтому мы просмотрели ее js-файл и проверили js-файл длиной 55 000 строк на наличие ссылок на эти элементы и ничего не нашли. Поэтому мы не знаем, почему у нас не работает. Консоль не показывает ошибок в выводе, когда мы открываем наш HTML-файл. Как мы можем заставить эти элементы реагировать на клики? где мы должны искать ошибки, ошибки?
<code><div class="form-group">
<label class="control-label col-md-4 col-lg-3" for="offer_tag_list">
<div class="inline-help form-label" data-help="<b>You would like to use keywords:</b> In that case use one or more words for each keyword and use a comma to seperate.
br>
<b>You want to remove a keyword?</b> Then click on the <i class="fa fa-remove"></i> symbol at the end of that keyword.
<div class="panel panel-default" id="feedback-form">
<div class="panel-heading">
<h4 class="panel-title">
<i class="fa fa-question-circle"></i> Was that information useful? </h4>
</div>
<div class="panel-body">
<form class="feedback" role="form" id="new_feedback" action="/feedbacks" accept-charset="UTF-8" data-remote="true" method="post"><input name="utf8" type="hidden" value="&#x2713;" />
<div class="form-group"><textarea placeholder="You can write comments here." class="form-control" name="feedback[comment]" id="feedback_comment">
</textarea></div>
<input type="hidden" value="/offers/new" name="feedback[context]" id="feedback_context" />
<input type="hidden" value="offers.tag_list" name="feedback[help_key]" id="feedback_help_key" />
<div class="actions"> <input type="submit" name="feedback[helpful]" value="Ja" class="btn btn-default" data-disable-with="Ja" /> <input type="submit" name="feedback[helpful]" value="Nein" class="btn btn-default" data-disable-with="Nein" /></div></form> <div class="hidden response">
Thank you for your Feedback!
</div>
</div>
</div>
" data-heading="How to use keywords?" data-help-key="offers.tag_list">
<i class="fa fa-question-circle-o"></i>
</div>Keywords
</label>
<div class="col-md-8 col-lg-9">
<div class="bootstrap-tagsinput">
<span class="twitter-typeahead" style="position: relative; display: inline-block;">
<input type="text" class="tt-hint" readonly="" spellcheck="false" tabindex="-1" dir="ltr" style="position: absolute; top: 0px; left: 0px; border-color: transparent; box-shadow: none; opacity: 1; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">
<input type="text" placeholder="" class="tt-input" spellcheck="false" dir="auto" aria-activedescendant="" aria-owns="undefined_listbox" role="combobox" aria-readonly="true" aria-autocomplete="list" style="">
<span role="status" aria-live="polite" style="position: absolute; padding: 0px; border: 0px; height: 1px; width: 1px; margin-bottom: -1px; margin-right: -1px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); white-space: nowrap;"></span>
<pre aria-hidden="true" style="position: absolute; visibility: hidden; white-space: pre; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 28px; font-style: normal; font-variant: normal; font-weight: 400; word-spacing: 0px; letter-spacing: 0px; text-indent: 0px; text-rendering: auto; text-transform: none;">