getElementsByClassName instead of querySelector. I need help!

JavaScript
1

How to get code to work, if I change querySelector to getElementsByClassName??? What else I should change?

here is the code…

const countries= ['Amazon','Apple', 'Best Buy', 'chrome web store','Calculator','Dell','Domino\'s pizza','ebay',
 'election results','home depot','Facebook','gmail', 'google', 'google translate', 'Youtube'];


const searchInput = document.querySelector('.search-input');
const suggestionsPanel = document.querySelector('.suggestions');

searchInput.addEventListener('keyup', function() {
  const input = searchInput.value;
  suggestionsPanel.innerHTML = '';
  const suggestions = countries.filter(function(country) {
    return country.toLowerCase().startsWith(input);
  });
  suggestions.forEach(function(suggested) {
    const div = document.createElement('div');
    div.innerHTML = suggested;
    suggestionsPanel.appendChild(div);
  });
  if (input === '') {
    suggestionsPanel.innerHTML = '';  
  }
})
2

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).

3

You haven’t posted your HTML code, but I assume you have only one .search-input ?

  • document.querySelector('.search-input) returns the first element that matches the selector.
  • document.getElementsByClassName returns a HTML collection (an array-like object) of ALL elements that match, even if it’s just one.

If you want to use getElementsByClassName, you’d have to access it by picking the first element of that list:
document.getElementsByClassName(.search-input)[0]

Question is why you’d want to do that. querySelector is a newer feature in the language, getElementsByClassName almost seems like ancient syntax (to me, anyway).

4

the reason I want to use getElementsByClassName instead of querySelector is that I have a task to write code just in JS without using the jQuery library

Here is the HTML code…

<div class="search-box">
  <img src="https://assets.stickpng.com/images/585e4ae1cb11b227491c3393.png" width="15px" height="15px" >
          <input type="text" class="search-input" name="q" id="search-bar" autocomplete="off">
             
  
   <div class="suggestions">
                 <div>Usa</div>
                 <div>Amazon</div>
           </div> 
</div>
5

I’m not sure but there might be some misunderstanding.

.querySelector is a feature of pure JavaScript, no jQuery needed.

.querySelector was included in JavaScript a couple of years ago, in order to offer the same convenience of jQuery’s way to select DOM elements - like $('.className').

Since .querySelector and .querySelectorAll have been included in pure JavaScript, there’s no need anymore for verbose syntax like .getElementsByClassName or .getElementById.

1 Like