JavaScript, create anchor with array, doesn't work

Question

I tried using jsfiddle, it works properly there, but for whatever reason, the file didn't work when i run it on chrome. i also have other code concurrently (specifically form validation) but they are working fine, and there are no clashing var and function too. I know that i should just use other simpler way but unfortunate this is part of the requirement to use array in the dropdown

function makeAnchor() {
  var div = document.createElement('div');
  var options = ['ENCLOSED SPACE SANITISATION', 'EVENT HYGIENE MANAGEMENT', 'WIDE AREA SANITISATION', 'OBJECT DISINFECTION'];

  for (var i = 0; i < options.length; i++) {
    // Create the list item:
    var a = document.createElement('a');
    var ok = options[i]
    a.href = "./service" + (i + 1) + ".html"
    a.appendChild(document.createTextNode(ok));

    div.appendChild(a);
  }
  return div;
}

document.getElementById('dropsc').appendChild(makeAnchor());

<!-- Nav Bar -->
<nav class="sticky-top">
  <ul>
    <li class="dropdown font-josefin">
      <a class="dropbtn">SERVICES</a>
      <div id="dropsc" class="dropdown-content">
        <!-- <a href="./service1.html">ENCLOSED SPACE SANITISATION</a>
                    <a href="./service2.html">EVENT HYGIENE MANAGEMENT</a>
                    <a href="./service3.html">WIDE AREA SANITISATION</a>
                    <a href="./service4.html">OBJECT DISINFECTION</a> -->
      </div>
    </li>
    <li class="font-josefin"><a href="./aboutme.html">ABOUT ME</a></li>
    <li class="font-josefin"><a href="./enquiry.html">ENQUIRY</a></li>
    <li class="font-josefin"><a href="./enhancements.html">ENHANCEMENTS</a></li>
    <li class="font-josefin"><a href="./disclaimer.html">DISCLAIMER</a></li>
  </ul>
</nav>

Describe what _"didn't work"_ means exactly? What should happen, what happens instead, are there any errors? And please make this a [mcve] so we can see/understand when `document.getElementById('dropsc').appendChild(makeAnchor());` is executed. — Andreas, Apr 12 '21 at 10:05
`window.addEventListener("load",function() {document.getElementById('dropsc').appendChild(makeAnchor());});` which is what JSFiddle does to your code — mplungjan, Apr 12 '21 at 10:08
@Andreas sorry for that, my codes did run on JsFiddle when i run it there where when i hover on service the dropdown liast appears, but i open the html, it didnt work, nothing appear — Chieng Justin, Apr 12 '21 at 11:35
@mplungjan thank you so much, i repalce my codes with that, and suprisingly it works, thank you so much, i will read on whar does it do later. — Chieng Justin, Apr 12 '21 at 11:36

score 0 · Answer 1 · answered Apr 12 '21 at 10:13

0

document.getElementById('dropsc').appendChild(makeAnchor().cloneNode(true));

Try this

answered Apr 12 '21 at 10:13

Toxy

521
4
7

hi, sorry but this didnt work as i replaced it, but the value is that icould search on what does this do so that i know why u recommended me for doing it. thank you anyway – Chieng Justin Apr 12 '21 at 11:39

JavaScript, create anchor with array, doesn't work

1 Answers1