javascript setAttribute replacement

Question

I am new to javascript and have problem when play with w3school's example. Here is the link the problem from https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_autocomplete

The original sample code for its HTML is

<form autocomplete="off" action="/action_page.php">
  <div class="autocomplete" style="width:300px;">
    <input id="myInput" type="text" name="myCountry" placeholder="Country">
  </div>
  <input type="submit">
</form>

And part of original sample javascript

a = document.createElement("DIV");
a.setAttribute("id", this.id + "autocomplete-list");
a.setAttribute("class", "autocomplete-items");
/*append the DIV element as a child of the autocomplete container:*/
this.parentNode.appendChild(a);
/*for each item in the array...*/
for (i = 0; i < arr.length; i++) {... 

while I replace the HTML to

<form autocomplete="off" action="/action_page.php">
  <div class="autocomplete" style="width:300px;">
    <input id="myInput" type="text" name="myCountry" placeholder="Country">
    <div class="autocomplete-items" style="display:none"></div>
  </div>
  <input type="submit">
</form>

the style part I actually did it within css style.

and change the javascript to

a = document.querySelector(".autocomplete-items");
a.style.display = "block";

replace the following and keep the rest of the original code.

a = document.createElement("DIV");
a.setAttribute("id", this.id + "autocomplete-list");
a.setAttribute("class", "autocomplete-items");
/*append the DIV element as a child of the autocomplete container:*/
this.parentNode.appendChild(a);

I think the result should be the same but turn out it did not work. Is there anything wrong with my thought? I want to skip the createElement part and make it done by html with css display property.

Answer 1

The reason your code doesn't work when applying the changes you made is because the function closeAllLists() removes any element with classname autocomplete-items, so also the div that contains all the autocomplete elements.

I applied some changes to your code to make it work:

In the html i gave your div an id of autocomplete-items-container.

<form autocomplete="off" action="/action_page.php">
  <div class="autocomplete" style="width:300px;">
    <input id="myInput" type="text" name="myCountry" placeholder="Country">
    <div id="autocomplete-items-container"></div>
  </div>
  <input type="submit">
</form>

and made some changes in the javascript:

function autocomplete(inp, arr) {
   var a = document.querySelector('#autocomplete-items-container');
   etc.

function closeAllLists(elmnt) {
    var x = document.querySelectorAll("#autocomplete-items-container > *");
    etc.

inp.addEventListener("keydown", function(e) {
      var x = document.querySelector('#autocomplete-items-container');
      etc.

Note that i'd recomment changing some of the variable names to make the code more readable for yourself, especially if you're new to javascript.

For example, how about changing a to container, b to listItem and x to allItems for example?

Good luck on your learning journey! Hope this was somewhat helpful.