Help me to debug my code, plz 👐

Question

Thank u for visiting my question )

Plz, help me to debug this code 👇
https://code.sololearn.com/WtKSK7SWqNzW/?ref=app

I'm trying to make a dictionary app and I have added 10 words for now.

When User clicks on search bar, there should be opened a drop-down list with 10 words, and, when User clicks on one of them, he/she should get the meaning of that word in a white div box.

I tried, but it is not working :(

Help, plz!

Answer 1

You have a few problems.
1. getElementsByClassName returns a NodeList. It is getting multiple elements but you just want one. querySelector is a better choice.

2. You have no event listeners yet you need to listen for changes to your searcher element. addEventListener and callback functions are what you need.

3. Much more minor and more aesthetic, you have a lot of repetitive code. This doesn't cause the bugs you're asking about but you could express what you want without a switch statement.

This will work instead:
document.addEventListener('DOMContentLoaded', function() {
var dict={
"cat": "Cat",
"dog": "Dog",
"book": "Book",
"pen": "Pen",
"pencil": "Pencil",
"computer": "Computer",
"run": "Run",
"house": "House",
"search": "Search",
"coffee": "Coffee"
};
var searcher = document.querySelector(".searcher");
var resultElement = document.querySelector(".result");
searcher.addEventListener('change', function() {
resultElement.innerHTML = dict[searcher.value] + "<br>";
});
});

You could also clean up your datalist HTML by having JavaScript generate all your datalist options from keys in your dict. All your option tags can be removed if you rely on JavaScript to generate them. The above code doesn't do this for you but it would be simple enough to add.

Answer 2

123456