#javascript #addeventlistener #appendchild #queryselector
#язык JavaScript #addeventlistener #приложение #селектор запросов
Вопрос:
У меня есть следующий очень простой HTML, И в операторе if в js — скрипте я просто пытаюсь вставить дополнительную функциональность, когда кто-то вводит кнопку «Ввод» — но я не понимаю, ПОЧЕМУ это не работает!
document.querySelector(".subText").addEventListener("keyup", function(event) { if (event.keyCode === 13) { let x = document.querySelector("#fname").value; console.log(x); } }); lt;bodygt; lt;div class="wrapper"gt; lt;div class="container"gt; lt;div class="toDo"gt; lt;!-- lt;svg xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512"gt; lt;path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M224 184h128m-128 72h128m-128 71h128"/gt; lt;path d="M448 258c0-106-86-192-192-192S64 152 64 258s86 192 192 192 192-86 192-192z" fill="none" stroke="currentColor" stroke-miterlimit="10" stroke-width="32"/gt; lt;circle cx="168" cy="184" r="8" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"/gt; lt;circle cx="168" cy="257" r="8" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"/gt; lt;circle cx="168" cy="328" r="8" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"/gt; lt;/svggt; --gt; lt;p class="toDoText"gt;To-do Listlt;/pgt; lt;/divgt; lt;divgt; lt;input type="text" id="fname" name="fname" placeholder="I need to..." class="inputText"gt; lt;input type="submit" value="Submit" class="subText" onclick="addNote()"gt; lt;/divgt; lt;/divgt; lt;div class="test"gt; lt;!-- lt;div class="notesList"gt; lt;p class="notesInput"gt;ddbdlt;/pgt; lt;button class="deleteBut" onclick="deleFunc()"gt; lt;/buttongt; lt;/divgt; --gt; lt;/divgt; lt;/divgt; lt;/bodygt; Ответ №1:
Функция вызывается, и if оператор выполняется правильно. Здесь я отредактировал console.log строки.
Запустите фрагмент кода. Щелкните текстовое поле, используйте клавишу tab, чтобы выбрать кнопку, затем нажмите клавишу enter. Et voila! console.log выполняются 3 инструкции.
Возможно, вам нужно уточнить свое понимание происходящего и, исходя из этого, свой вопрос. 🙂
document.querySelector(".subText").addEventListener("keyup", function(event) { if (event.keyCode === 13) { let x = document.querySelector("#fname").value; // console.log(x); console.log("console.log(x); (1)"); } }); function addNote() { let x = document.querySelector("#fname").value; // console.log(x); console.log("console.log(x); (2)"); let divN = document.createElement("div"); divN.classList.add("notesList"); let para = document.createElement("p"); para.classList.add("notesInput"); divN.appendChild(para); let paraText = document.createTextNode(x); // console.log(paraText); console.log("console.log(paraText); (3)"); para.appendChild(paraText); let but = document.createElement("button"); but.classList.add("deleteBut"); but.setAttribute("onclick", "deleFunc()") divN.appendChild(but); let y = document.querySelector(".test"); y.appendChild(divN); } lt;bodygt; lt;div class="wrapper"gt; lt;div class="container"gt; lt;div class="toDo"gt; lt;!-- lt;svg xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512"gt; lt;path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M224 184h128m-128 72h128m-128 71h128"/gt; lt;path d="M448 258c0-106-86-192-192-192S64 152 64 258s86 192 192 192 192-86 192-192z" fill="none" stroke="currentColor" stroke-miterlimit="10" stroke-width="32"/gt; lt;circle cx="168" cy="184" r="8" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"/gt; lt;circle cx="168" cy="257" r="8" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"/gt; lt;circle cx="168" cy="328" r="8" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"/gt; lt;/svggt; --gt; lt;p class="toDoText"gt;To-do Listlt;/pgt; lt;/divgt; lt;divgt; lt;input type="text" id="fname" name="fname" placeholder="I need to..." class="inputText"gt; lt;input type="submit" value="Submit" class="subText" onclick="addNote()"gt; lt;/divgt; lt;/divgt; lt;div class="test"gt; lt;!-- lt;div class="notesList"gt; lt;p class="notesInput"gt;ddbdlt;/pgt; lt;button class="deleteBut" onclick="deleFunc()"gt; lt;/buttongt; lt;/divgt; --gt; lt;/divgt; lt;/divgt; lt;/bodygt;
Комментарии:
1. спасибо @enhzflep за ваше время. Проблема со вторым вопросом, наконец, была связана со свойством ширины, но решение для первого вопроса работает только в том случае, если я сначала нажму «Отправить». Если я снова изменю ввод, я все равно не смогу использовать «Ввод».
Ответ №2:
С помощью оператора if я просто пытаюсь вставить дополнительную функциональность, когда кто — то вводит кнопку «Ввод» — Idk, ПОЧЕМУ это не работает!
Вы добавили прослушиватель на кнопку вместо добавления прослушивателя в поле ввода.
и с остальной частью кода внутри функции addNote() я пытаюсь создавать элемент каждый раз, когда пользователь вставляет новый ввод-аналогичный тому, который закомментирован в HTML-коде. Однако, похоже, что стиль из элемента, сгенерированного из JS, просто противоречит div, который я прокомментировал в HTML…
Я изменил ваш код, чтобы он был более читабельным. Я бы предложил преобразовать каждое создание и изменения атрибутов для каждого элемента в собственные методы, чтобы сделать код еще более читабельным.
Во время моей перестановки я автоматически решил вашу проблему, разместив код в правильном порядке. Теперь сгенерированный код выглядит как ваш прокомментированный код.
Я также добавил прослушиватель событий к вашей кнопке. Если вы удалите кнопку, вам также необходимо удалить прослушиватель событий, иначе произойдет утечка памяти.
Я также хотел бы предложить вам начать использовать id и getElementByID вместо querySelect и class , просто для создания шаблона, в котором id на элементе косвенно указано, что он используется вместе с javascript.
document.getElementById("fname").addEventListener("keyup", function(event) { if (event.key === "Enter") { addNote(); } }); function addNote() { let x = document.querySelector("#fname"); let divN = document.createElement("div"); let para = document.createElement("p"); let paraText = document.createTextNode(x.value); let but = document.createElement("button"); let y = document.querySelector(".test"); x.value = ''; divN.classList.add("notesList"); para.classList.add("notesInput"); but.classList.add("deleteBut"); but.addEventListener('click', (event) =gt; { console.log('clicked removed') } ); divN.appendChild(para); para.appendChild(paraText); divN.appendChild(but); y.appendChild(divN); } lt;bodygt; lt;div class="wrapper"gt; lt;div class="container"gt; lt;div class="toDo"gt; lt;!-- lt;svg xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512"gt; lt;path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M224 184h128m-128 72h128m-128 71h128"/gt; lt;path d="M448 258c0-106-86-192-192-192S64 152 64 258s86 192 192 192 192-86 192-192z" fill="none" stroke="currentColor" stroke-miterlimit="10" stroke-width="32"/gt; lt;circle cx="168" cy="184" r="8" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"/gt; lt;circle cx="168" cy="257" r="8" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"/gt; lt;circle cx="168" cy="328" r="8" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"/gt; lt;/svggt; --gt; lt;p class="toDoText"gt;To-do Listlt;/pgt; lt;/divgt; lt;divgt; lt;input type="text" id="fname" name="fname" placeholder="I need to..." class="inputText"gt; lt;input type="submit" value="Submit" class="subText" onclick="addNote()"gt; lt;/divgt; lt;/divgt; lt;div class="test"gt; lt;!-- lt;div class="notesList"gt; lt;p class="notesInput"gt;ddbdlt;/pgt; lt;button class="deleteBut" onclick="deleFunc()"gt; lt;/buttongt; lt;/divgt; --gt; lt;/divgt; lt;/divgt; lt;/bodygt; Комментарии:
1. в самом деле! Теперь это более читабельно! @RichardElimaa большое вам спасибо за вашу записку. Проблема со вторым вопросом, наконец, была связана со свойством ширины, но решение для первого работает только в том случае, если я сначала нажму «Отправить». Если я снова изменю ввод, я все равно не смогу использовать «Ввод».
2. Хорошо, но мой ответ решил эту проблему, верно? Я внес небольшую поправку в код, где ввод очищается после добавления элемента в список (при нажатии Enter или кнопки).
3. к сожалению, нет, потому что, если я что-то напишу при вводе и нажму enter, элемент не будет создан
4. Странно, потому что мой фрагмент работает для меня как в Mac Firefox, так и в Mac Chrome.
5. Я не нажимаю «Отправить» с помощью кнопки «ввод». Я просто пишу что-то во вводе, а затем нажимаю enter. Вероятно, то, что ты говоришь, совсем другое.