CODEWITHSUNDEEP
javascripthtml
Cell
Cell

Reputation: 53

Use of "a href" to launch javascript function

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>

Upvotes: 4

Views: 413

Answers (1)

Isaaс Weisberg
Isaaс Weisberg

Reputation: 2824

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

Upvotes: 4

Related Questions