js-функция, которая принимает html-элемент в качестве аргумента

ProgramBox

js-функция, которая принимает html-элемент в качестве аргумента

Post author:admin
Запись опубликована:20 февраля, 2023
Post category:Вопросы по программированию

#javascript #html

#javascript #HTML

Вопрос:

Текстовое поле должно отображаться в списке как новый элемент при нажатии кнопок, когда я нажимаю кнопку, текстовые данные должны быть добавлены в список в виде новой строки. Как связать кнопку с этой функцией?

 <!DOCTYPE html>
<html>
<head>
<ul id=parent></ul>
<input type="button" value="Add element to list" onclick="addList(parent)">
<input type="text" value="new id" placeholder="id" name="strCode"></p><p>
</head>
<body>
<form name="search">
</form>
<script type="text/javascript">
var keyBox = document.search.strCode;
    function addList(parent) {
        var parent = document.getElementsByTagName("ul")[0];
        var li = document.createElement("li");
        parent.appendChild(li)
    }
    keyBox.addEventListener("strCode",addList)
</script>
</body>
</html>

1. Что такое прослушиватель событий «strCode» ?

2. Итак, прочитайте значение текстового поля и установите textContent со значением.

3. У вас есть <input> и <ul> в <head> вашем документе. Вы не можете этого сделать. Весь HTML-код должен входить в <body> .

Ответ №1:

HTML не принадлежит head
встроенные обработчики событий не рекомендуются. Здесь я использую EventListener и добавляю его к кнопке
ваш EventListener не добавляет событие — я думаю, вы думали, что для прослушивания нужно поле ввода, а не кнопка
У вас есть идентификатор =parent , используйте его вместо document.getElementsByTagName("ul")[0];
На самом деле вы не устанавливаете содержимое добавляемого вами LI
передача parent в функцию, а затем использование var parent не будет работать хорошо

 function addList(parent) {  
        var parent = document.getElementsByTagName("ul")[0];`

Я полагаю, что вы ищете такой код —

ПРИМЕЧАНИЕ:

Я переместил элементы формы внутри формы, но тег формы вообще не нужен
Я использую событие отправки и выбираю поле — преимущества, ввод обновит и автоматически выберет текст после добавления

 window.addEventListener("load", function() { // on page load
  const strCode = document.getElementById("strCode"); // input field
  const listContainer = document.getElementById("parent"); // ul list

  document.getElementById("search").addEventListener("submit", function(e) {
    e.preventDefault(); // stop submission
    const val = strCode.value; // value from input field
    const li = document.createElement("li");
    li.textContent = val;
    listContainer.appendChild(li)
    strCode.select(); // ready for next entry
  });
  strCode.select(); // ready for first entry
});

 <form id="search">
  <input type="submit" value="Add element to list" id="add" />
  <input type="text" value="new id" placeholder="id" name="strCode" id="strCode" />
</form>
<ul id="parent"></ul>

Если вы хотите иметь разные списки, вы можете указать цель в атрибуте данных формы и делегировать из элемента контейнера

 window.addEventListener("load", function() { // on page load
  document.getElementById("container").addEventListener("submit",function(e) {
    e.preventDefault(); // stop submission
    const tgt = e.target;
    const listContainer = document.getElementById(tgt.dataset.target); // shopping ot todo
    const strCode = tgt.querySelector("[name=strCode]");
    const val = strCode.value; // value from input field
    const li = document.createElement("li");
    li.textContent = val;
    listContainer.appendChild(li)
    strCode.select(); // ready for next entry
  });
  document.querySelector("[name=strCode]").select(); // ready for first entry in first form
});

 <div id="container">
<form id="shoppingForm" data-target="shopping">
  <input type="submit" value="Add element to shopping list"/>
  <input type="text" value="new shopping" placeholder="id" name="strCode"/>
</form>

Shopping: <ul id="shopping"></ul>

<form id="todoForm" data-target="todo">
  <input type="submit" value="Add element to TODO list"/>
  <input type="text" value="new todo" placeholder="id" name="strCode"/>
</form>

TODO:
<ul id="todo"></ul>
</div>

1.Не могли button input бы стать a submit input , а прослушиватель событий прослушивать submit событие и использовать event.preventDefault() для предотвращения перезагрузки страницы? Это может быть лучше, так как большинство браузеров будут принимать клавишу ввода при отправке формы.

2. @программист Очень хорошая идея. Обычно я делаю именно это. Я обновил

Ответ №2:

Ваш ul и input s должны быть перемещены в body .
Вы должны установить значение textContent вновь созданных li s, если хотите, чтобы в них был какой-либо текст.
Почему вы передаете parent параметр addList , если он никогда не используется? (Он маскируется локальной parent переменной.)
Пусто form . Вероятно, вам следует поместить в input него s.
strCode это не имя события, поэтому вы не можете использовать его таким образом addEventListener . Поскольку у вас уже есть встроенный onclick прослушиватель событий, для чего эта строка?

 function addList() {
    var parent = document.getElementById('parent');
    var li = document.createElement("li");
    li.textContent = document.getElementsByTagName('input')[1].value;
    parent.appendChild(li)
}

Ответ №3:

У вас несколько ошибок .. [см. Ответ mplungjan],

Вот мой код :

 function addList() {
   var text = document.getElementById("textVal").value;
     var li = document.createElement("li");
   var textnode = document.createTextNode(text);
     li.appendChild(textnode)
   document.getElementById("parent").appendChild(li)
}

 <!DOCTYPE html>
<html>
<body>
    <input type="button" value="Add element to list" onclick="addList()">
    <input type="text" value="new id" placeholder="id" name="strCode" id="textVal">
    <ul id=parent></ul>
  <form name="search"></form>
</body>
</html>

Ответ №4:

Вам нужно будет поместить свои входные данные внутри формы, чтобы получить к ней доступ по имени.

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

 const
  form = document.forms.search,
  btn = form.querySelector('input[type="button"]'),
  keyBox = form.elements.strCode;

const addList = (listId) => {
  const
    targetList = document.getElementById(listId),
    listItem = document.createElement('li');
  listItem.textContent = keyBox.value;
  targetList.append(listItem);
  keyBox.value = '';
}

 <form name="search" onsubmit="return false;">
  <input type="button" value="Add element to list" onclick="addList('parent')">
  <input type="text" value="new id" placeholder="id" name="strCode">
</form>
<ul id="parent"></ul>

1. 1: Зачем путать новичка, который даже не может поместить элементы внутри формы, с функциями стрелки ES6 2: Если вы добавите расширенный JS, почему тогда у вас будет еще больше встроенных обработчиков событий, чем раньше?

2. @mplungjan Я сохранил встроенный обработчик событий, потому что хотел показать минимальное количество изменений, необходимых для его функционирования. Я не хотел полностью проводить рефакторинг. Я просто переместил элементы в DOM и исправил функцию элемента списка.