Use of "a href" to launch javascript function

Question

I want to use "a href" to launch a function in javascript but to no success.How does one use the "a href" to launch a javascript function? Any help would be greatly appreciated.

I'm trying to use a a href element in the sidebar to change the div displayed in the div "main" . I'm actually unsure which part of the code is the issue, but regardless,I would really appreciate someone to help me take a look and give me some pointers on how to use the "a href" element to start a javascript function.

Thank you in advance.

<script>
function openNav() {
    document.getElementById("mySidenav").style.width = "250px";
    document.getElementById("main").style.marginLeft = "250px";
}

function closeNav() {
    document.getElementById("mySidenav").style.width = "0";
    document.getElementById("main").style.marginLeft= "0";
}
document.addEventListener('mousemove', function(event) {
  console.log(event.clientX);
  if (event.clientX < 250) {
    openNav();
  } else {
    closeNav();
  }
})

function openTab(tabName) {
	var x = document.getElementsByClassName("tab");
    for (i = 0; i < tabcontent.length; i++) {
        tabcontent[i].style.display = "none";
    }
    document.getElementById(tabName).style.display = "block"; 	
}

	

</script>

<body>

<div id="mySidenav" class="sidenav">
  <h1>Course Select</h1>
  <h2>English</h2>
  <a href="#" onlick="javascript:openTab('e1');">Course 1</a>
  <a href="javascript:alert('Hello World!');">Course 2</a>
  <a href="#" onclick="openTab('e3')">Course 3</a>
  <h2>Physics</h2>
  <a href="#" onclick="openTab('p1')">Course 1</a>
  <a href="#" onclick="openTab('p2')">Course 2</a>
  <a href="#" onclick="openTab('p3')">Course 3</a>
  <h2>ICT</h2>
  <a href="#" onclick="openTab('i1')">Course 1</a>
  <a href="#" onclick="openTab('i2')">Course 2</a>
  <a href="#" onclick="openTab('i3')">Course 3</a>
	<a href="#" onclick="openTab(help)">Help</a>
</div>	
	<button class="button button1" onlick="openTab('e1')">PUSH ME</button>
<div id="main">

	  
<div id="help" class="tab" >
  <center><iframe src="homepage.html"></iframe></center>
</div>
<div id="e1" class="tab" >
  <center><iframe src="coursee1.html" style="display:none"></iframe></center>
</div>
<div id="p1" class="tab" >
  <center><iframe src="coursep1.html" style="display:none"></iframe></center>
</div>
<div id="i1" class="tab" >
  <center><iframe src="coursei1.html" style="display:none"></iframe></center>
</div>
	  

</div>
</body>

You shouldn't - you should attach handlers with Javascript (eg addEventListener), and never in HTML (it's as bad as eval) — CertainPerformance
– CertainPerformance, Commented Apr 20, 2018 at 4:15
seems like a bad idea to load all those iframes to show them when they are clicked. — epascarello
– epascarello, Commented Apr 20, 2018 at 4:30
addEventListener are also outdated, use global event instead. .. id.onchange = (function(){ console.log("Hello from ecma6") }) lol — NVRM
– NVRM, Commented Apr 20, 2018 at 5:03
... « and never in HTML (it's as bad as eval) –» wtf are you talking about?? — NVRM
– NVRM, Commented Apr 20, 2018 at 5:06

Isaaс Weisberg · Accepted Answer · 2018-04-20 04:47:44Z

4

One does not use a tag with hyper-link reference attribute to initiate javascript code execution, it is impossible. The proper way to transform a user action into a javascript code execution is usage of DOM events, onclick being of particular interest in your case.

<a href="javascript:alert('Hello World!');">Course 2</a>

This declaration, in case of usage of onclick event, would be transformed into

<div onclick="alert('Hello World!')">Course 2</div>

Note that styling will have to be applied manually though, so if you would like to quickly retain the visual behavior of the element, as pointed out by MEE in comment, you can easily write

<a href="#" onclick="alert('Hello World!')">Course 2</a>

Additionally, considering a useful advice found in a comment by CertainPerformance, it is a poor practice to assign DOM event handlers, as well as anything javascript code related, in an inline-html fashion while writing framework-less projects and a safe, mature way to do it is the following:

// Given a reference to the the dom object which needs to have an event handler
domObject.addEventListener("click", myScript); // where myScript is an event handler declared, for instance, in global scope

Further reading:

https://www.w3schools.com/jsref/dom_obj_event.asp https://www.w3schools.com/jsref/event_onclick.asp

edited Apr 20, 2018 at 4:47

answered Apr 20, 2018 at 4:22

Isaaс Weisberg

2,9053 gold badges17 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

User that hates AI Over a year ago

Another way would be <a href="#" onclick="..."></a>.

User that hates AI Over a year ago

maybe it is worth noting that this might lead the page to jump around. To prevent this use some non-existing anchor (not on this page defined) like #!.

Collectives™ on Stack Overflow

Use of "a href" to launch javascript function

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related