通过使用.innerHTML成功添加了按钮，但无法使用其类名访问按钮

Question

    function displaMatches (matches) {
  var searchText = document.querySelector('.search').value;
  var menu = document.querySelector('.menu')
  matches.forEach(match => {
    menu.innerHTML += `<li><button class="suggestion">${match}</button></li>`
  });

  var suggestions = document.querySelectorAll('.suggestion');
  suggestions.forEach(suggestion => {
    suggestion.addEventListener('click', () => {
      document.querySelector('.search').value = suggestion.textContent;
    });
  });
}
var search = document.querySelector('.search')

search.addEventListener('change', () => {
  var searchText = document.querySelector('.search').value
  autocomplete();
});

search.addEventListener('keyup', () => {
  var searchText = document.querySelector('.search').value
  autocomplete();
});

function autocomplete () {
  var searchText = document.querySelector('.search').value

  fetch(`https://cors-anywhere.herokuapp.com/https://api.yelp.com/v3/autocomplete?&text=${searchText}&latitude=37.3351534&longitude=-122.0352478`, {
    method: "GET",
    headers: {
      "Content-Type": "application/json",
      "Authorization": `Bearer ${access_token}`,
    }
  }).then((res) => {
    return res.json();
  }).then((data) => {
    var allData = [];
    allData.push(data);
    console.log(allData);
    let businesses = allData[0].businesses
    let categories = allData[0].categories
    let terms = allData[0].terms

    let matches = [];

    businesses.forEach(business => {
      matches.push(business.name);
    });

    categories.forEach(category => {
      matches.push(category.title);
    });

    terms.forEach(term => {
      matches.push(term.text);
    });
    displaMatches(matches);
  });
}

我可以看到按钮已成功添加到页面上的菜单。 但是，当我尝试使用类名“ suggestion”访问按钮时，得到的结果为null。 我做错了什么？

我更改了代码，displayMatches函数现在可以正常工作了。 但是，将建议添加到搜索框后，搜索按钮不再起作用。 如果我禁用了建议功能，并在搜索框中输入了自己的单词，那么我可以毫无问题地进行搜索。 谁能解释为什么？

Answer 1

您似乎缺少一个=号。 应该：

menu.innerHTML += `<li><button class="suggestion">${match}</button></li>`

另外，请记住，如果要向每个 .suggestion而不是仅向第一个.suggestion添加事件侦听器，则需要使用var suggestion = document.querySelectorAll('.suggestion') .suggestion var suggestion = document.querySelectorAll('.suggestion')

Answer 2

希望这会有所帮助。 我重新编写了功能

 function displaMatches (matches) { var menu = document.querySelector('.menu') matches.forEach(match => { //Create/add objects in javascript $li = document.createElement('li'); $btn = document.createElement('button'); $btn.className = 'suggestion'; $btn.append(match); $li.appendChild($btn) menu.appendChild($li); }); var suggestion = document.querySelectorAll('.suggestion')//this should return array of buttons with the defined classname console.log('ppp', suggestion[0]); suggestion.forEach(match => { match.onclick = () => { console.log(match.textContent) searchText = match.textContent; }; }) }

Answer 3

有很多错误，但这是可行的。 抱歉，使用旧的普通js。

   <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<ul class="menu">
</ul>
<div id="searchtext">
</div>

<script>
    function displaMatches (matches) {

        var menu = document.querySelector('.menu');
        var item = function(match) {
            return '<li><button class="suggestion">' + match + '</button></li>';
        };

        var menuItems = [];

        for(var i=0;i<matches.length;i++){
            var m = matches[i];
            menuItems.push(item(m));
        }

        menu.innerHTML = menuItems.join('');

    }


   window.onload =  function() {
        var matches = [ 'red', 'blue', 'red' ];
        displaMatches(matches);

       setTimeout(function() {
           var suggestions = document.querySelectorAll('.suggestion');
           for (var i = 0; i < suggestions.length; i++) {
               suggestions[i].onclick = function () {
                   document.getElementById('searchtext').innerText += this.innerText;
               };
            }

       }, 1000);
    };
</script>

</body>
</html>

通过使用.innerHTML成功添加了按钮，但无法使用其类名访问按钮

问题描述

3 个解决方案

解决方案1
0 2017-11-15 19:45:31

解决方案2
0 已采纳 2017-11-15 21:08:25

解决方案3
0 2017-11-15 21:39:36

通过使用.innerHTML成功添加了按钮，但无法使用其类名访问按钮

问题描述

3 个解决方案

解决方案1 0 2017-11-15 19:45:31

解决方案2 0 已采纳 2017-11-15 21:08:25

解决方案3 0 2017-11-15 21:39:36

解决方案1
0 2017-11-15 19:45:31

解决方案2
0 已采纳 2017-11-15 21:08:25

解决方案3
0 2017-11-15 21:39:36