JavaScript

Не могу решить задачу по JS

Текст задачи здесь
Решал так:
 HTML:

 

   

  
     
    

    

    
JS:
    
let arr = ['Belarus', 'Belgium', 'Bulgaria']; 
    
let input = document.getElementById('elem'); 
    
let list = document.getElementById('list'); 
    
 
    
input.addEventListener('input', function() { 
    
  let newArr = arr.filter(function(elem) { 
    
    return elem.startsWith(input.value); 
    
  }); 
    
 
    
  list.innerHTML = ''; // Очищаем список перед добавлением новых элементов 
    
 
    
  newArr.forEach(function(elem) { 
    
    let li = document.createElement('li'); 
    
    li.textContent = elem; 
    
    list.appendChild(li); 
    
  }); 
    
});
    Код не работает
    Просьба без библиотек
    Сергей Сардак
    Сергей Сардак
    141 
      
    
 
    
 
    
   
    
  Автодополнение 
    
   
    
    #parent { 
    
      position: relative; 
    
    } 
    
    #elem { 
    
      padding: 5px; 
    
      font-size: 18px; 
    
    }
    
    #parent ul { 
    
      position: absolute; 
    
      margin: 0; 
    
      padding: 0; 
    
      list-style-type: none; 
    
      background-color: white; 
    
    } 
    
    #parent li { 
    
      border: 1px solid gray; 
    
      font-size: 18px; 
    
      padding: 5px; 
    
    } 
    
    #parent li:hover { 
    
      border: 1px solid black; 
    
      cursor: pointer; 
    
    } 
    
   
    
   
    
    let countries = ["Belarus", "Belgium", "Bulgaria"]; 
    
    function main() { 
    
      let elem = document.querySelector('#elem'); 
    
      let list = document.querySelector('#list'); 
    
      elem.addEventListener('input', function() { 
    
        list.textContent = ""; 
    
        if (this.value !== "") { 
    
          let matches = countries.filter(item => item.startsWith(this.value)); 
    
          if (matches.length > 0) { 
    
            for (let match of matches) { 
    
              let li = document.createElement('li'); 
    
              li.textContent = match; 
    
              list.appendChild(li); 
    
              li.addEventListener('click', function() { 
    
                elem.value = this.textContent; 
    
                list.textContent = ""; 
    
              }); 
    
            } 
    
          } 
    
        } 
    
      }); 
    
    } 
    
    document.addEventListener('DOMContentLoaded', main);
      Вадим Шадрин
      Вадим Шадрин
      64 989
      Лучший ответ
      Сергей Рубцов набрал ваш текст в NPP и в нем запустил под разными браузерами, списка таки не увидел :(
      Тебе нужен выпадающий список с фильтром, не могу понять? Зачем тогда ты делаешь меню..

        
      
 
      
 
      
  Пример 
      
 
      
    
      
 
      
 
      
     
      
   
      
 
      
 
      
 
      
 
      
let arr = ['Belarus', 'Belgium', 'Bulgaria'];  
      
let input = document.getElementById('elem');  
      
let dataList = document.getElementById('countries'); 
      
 
      
input.addEventListener('input', function() { 
      
  // Очищаем список перед добавлением новых элементов  
      
  dataList.innerHTML = ''; 
      
 
      
  let filteredArr = arr.filter(function(elem) { 
      
    return elem.toLowerCase().startsWith(input.value.toLowerCase()); 
      
  }); 
      
 
      
  filteredArr.forEach(function(elem) { 
      
    let option = document.createElement('option'); 
      
    option.value = elem; 
      
    dataList.appendChild(option); 
      
  }); 
      
});
      Простой ....
      Простой ....
      77 444
      Сергей Сардак Я наверху оставил ссылку с заданием. Прочти его. Там автор подробно объясняет какой должен быть результат
      https://codepen.io/norbert123/pen/ZEmmpyv введи заглавную латинскую букву B в JS все регистрозависимое так что поиск тоже
      Сергей Кузнецов
      Сергей Кузнецов
      59 846
      JavaScript код подключил неправильно. Либо в конец body, либо внешний с атрибутом defer, либо внутри обработчика события 'DOMContentLoaded'.
      Консоль явно тебе показывает что на момент выполнения кода элемента с id='elem' ещё не существует.
      Если подключить правильно, то твой код прекрасно работает.
      ФД
      Федор Дулогло
      23 960
      Сергей Сардак В конец body пробовал - не работает. В консоли ничего не выдаёт, никакой ошибки
      Что именно не работает? Вводишь буквы - фильтруется список, что не так?
      Александр Наркомов
      Александр Наркомов
      1 725
      Сергей Сардак Не высвечивает список

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