Call JS file in HTML by something else than "<a href="javascript:void(0);" onclick="myFunction()"

[Chris]

Hi,

Is there an easy way to replace "<a href="javascript:void(0);" onclick="myFunction()"> by some type of get elemend ID?

I have an hamburger menu.js, but if I don't use the code above, it will not call it, do you have another way that <a href="javascript:void(0);" onclick="myFunction()?

 

[Saul H.]

You could simply use AddEventListener to assign an ID or classification, and refer to it in your function. It's actually pretty rudimentary. W3schools and Khan Academy both have some fabulous tutorials on the topic.

 

[VBService]

First of all, your html code syntax is incorrect, check it:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<header>
  <nav class="navbar">
    <ul>
      <li>
        <ul>
          <li>
            <a href="Index2.0.html">Home</a>
          </li>
          <li>
            <a href="Skills2.0.html">Skills</a>
          </li>
          <li>
            <a href="About2.0.html">About Me</a>
          </li>
          <li>
            <a href="#Projects">Projects (soon)</a>
          </li>
          <li>
            <a href="Dowwnload2.0.html">Download</a>
          </li>
          <li>
            <a href="Contact2.0.html">Contact</a>
          </li>
        </ul>
      </li>
      <li class="icon">
        <a href="javascript:void(0)" onclick="myFunction()">
          <i class="fa fa-bars"></i>
        </a>
      </li>
    </ul>
  </nav>
</header>

<style>
  ul {
    list-style-type: none;
  }
  ul ul {
    padding: 0;
  }
</style>

or

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<header>
  <nav class="navbar">
    <ul>
      <li>
        <a href="Index2.0.html">Home</a>
      </li>
      <li>
        <a href="Skills2.0.html">Skills</a>
      </li>
      <li>
        <a href="About2.0.html">About Me</a>
      </li>
      <li>
        <a href="#Projects">Projects (soon)</a>
      </li>
      <li>
        <a href="Dowwnload2.0.html">Download</a>
      </li>
      <li>
        <a href="Contact2.0.html">Contact</a>
      </li>
      <li class="icon">
        <a href="javascript:void(0)" onclick="myFunction()">
          <i class="fa fa-bars"></i>
        </a>
      </li>
    </ul>
  </nav>
</header>

<style>
  ul {
    list-style-type: none;
    padding: 0;
  }
  li.icon {
    padding-top: 1rem;
  }
</style>

 

[VBService]

Is there an easy way to replace "<a href="javascript:void(0);" onclick="myFunction()">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<header>
  <nav class="navbar">
    <ul>
      <li>
        <a href="Index2.0.html">Home</a>
      </li>
      <li>
        <a href="Threedots2.0.html">...</a>
      </li>
      <li>
        <a href="Contact2.0.html">Contact</a>
      </li>
      <li class="icon">
        <a href="#">
          <i class="fa fa-bars"></i>
        </a>
      </li>
    </ul>
  </nav>
</header>
<output></output>

<script>
  const output = document.querySelector('output');
 
  const link = document.querySelector('.icon a');
  link.addEventListener('click', handleFaBars);

  function handleFaBars(e) {
    e.preventDefault();
    output.innerHTML = 'Fa Bars icon has been clicked';
  }
</script>

<style>
  ul {
    list-style-type: none;
    padding: 0;
  }
  li.icon {
    padding-top: 1rem;
  }
</style>

 

[VBService]

Is there an easy way to replace "<a href="javascript:void(0);" onclick="myFunction()">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<header>
  <nav class="navbar">
    <ul>
      <li>
        <a href="Index2.0.html">Home</a>
      </li>
      <li>
        <a href="Threedots2.0.html">...</a>
      </li>
      <li>
        <a href="Contact2.0.html">Contact</a>
      </li>
      <li class="icon">
        <a href="#">
          <i class="fa fa-bars"></i>
        </a>
      </li>
    </ul>
  </nav>
</header>
<output></output>

<script>
  const output = document.querySelector('output');

  const navbar = document.querySelector('.navbar');
  navbar.addEventListener('click', handleNavbar);

  function handleNavbar(e) {
    e.preventDefault();

    if (e.target.href && e.target.href !== '#')
      output.innerHTML = `<b>${e.target.href.split('/').pop()}</b> has been clicked`;
    else
      output.innerHTML = '';

    if (e.target.matches('.fa-bars'))
      output.innerHTML = '<b>Fa Bars</b> icon has been clicked';
  }
</script>

<style>
  ul {
    list-style-type: none;
    padding: 0;
  }
  li.icon {
    padding-top: 1rem;
  }
</style>

 

[Chris]

You could simply use AddEventListener to assign an ID or classification, and refer to it in your function. It's actually pretty rudimentary. W3schools and Khan Academy both have some fabulous tutorials on the topic.

I took a look at W3schools, but it does not seem up-to-date. And examples don't always make sense for me.

 

[Chris]

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<header>
  <nav class="navbar">
    <ul>
      <li>
        <a href="Index2.0.html">Home</a>
      </li>
      <li>
        <a href="Threedots2.0.html">...</a>
      </li>
      <li>
        <a href="Contact2.0.html">Contact</a>
      </li>
      <li class="icon">
        <a href="#">
          <i class="fa fa-bars"></i>
        </a>
      </li>
    </ul>
  </nav>
</header>
<output></output>

<script>
  const output = document.querySelector('output');
 
  const link = document.querySelector('.icon a');
  link.addEventListener('click', handleFaBars);

  function handleFaBars(e) {
    e.preventDefault();
    output.innerHTML = 'Fa Bars icon has been clicked';
  }
</script>

<style>
  ul {
    list-style-type: none;
    padding: 0;
  }
  li.icon {
    padding-top: 1rem;
  }
</style>

Thank you, I really like that one!