JavaScript - href vs onclick for callback function on Hyperlink
Putting the onclick within the href would offend those who believe strongly in separation of content from behavior/action. The argument is that your html content should remain focused solely on content, not on presentation or behavior.
The typical path these days is to use a javascript library (eg. jquery) and create an event handler using that library. It would look something like:
$('a').click( function(e) {e.preventDefault(); /*your_code_here;*/ return false; } );
What is the Difference between onclick and href= javascript:function name?
If your element is not actually supposed to link the user someplace, don't make it an anchor element. If you're using <a> tags just to get the underline/cursor change - don't. Use CSS on a <span> (or other element) instead.
span.link {
text-decoration: underline;
color: blue;
cursor: pointer;
}
Keep your HTML semantic and use anchor elements only when you want to link the user somewhere.
href= javascript:func() vs href= # onclick= javascript:func()
If your JavaScript onclick event handler returns false, the scrolling won't occur. You can do it like this:
<a href="#" onclick="expand(); return false;">
If your onclick handler does not return false, the href link will be followed. In the case of href="#", that means scroll to the top of the page.
HTML anchor link - href and onclick both?
Just return true instead?
The return value from the onClick code is what determines whether the link's inherent clicked action is processed or not - returning false means that it isn't processed, but if you return true then the browser will proceed to process it after your function returns and go to the proper anchor.
Kendo Editor Dynamic Link onClick Function Not Working
I believe the issue is that the Kendo Editor puts the body content within an IFRAME and your "myFunction" is not within that IFRAME. Try setting the onClick to
window.parent.myFunction();
$("#toolbarSubmitBtn").on("click", function () {
var $html = '<a href="#" onClick="window.parent.myFunction();" contenteditable="false"> Click to show alert </a>';
$("#editor").data("kendoEditor").paste($html);
});
Optionally, set contenteditable="false" on your inserted link to prevent user editing the link text.
Here is a DEMO
Onclick or href which is best for opening an link in button
If you use jquery you can write the second button like this
<button type="button" id="SecondButton" data-href="index.php">Permalink</button>
and then add some javascript:
<script type="text/javascript">
$('#SecondButton').click(function(e) {
e.preventDefault(); e.stopPropagation();
window.location.href = $(e.currentTarget).data().href;
});
</script>
Edit (Further completed scenarios)
<button type="button" id="SecondButton" data-href="index.php" onclick="location='permalink.php'" href="index.php">Permalink</button>
I would insert both additional href tag and onclick inside it too; you could then test for different scenarios; devices that do not support javascript or jquery fails to load on CDN like mobile etc:
<button type="button" id="SecondButton" data-href="index.php?trackAnalytics=1" onclick="location='permalink.php?trackAnalytics=2'" href="index.php?trackAnalytics=3">Permalink</button>
Adding onclick function in anchor tag which is not working
you are just assigning but declaring it, just need to make it true, so given id would be readonly, please find below snippets
<!DOCTYPE html>
<html>
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
crossorigin="anonymous">
<title>Mole Calculator | Chemistry Calculator</title>
</head>
<body>
<nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-black">
<div class="container-fluid">
<a class="navbar-brand" href="#"><h4>
<b>Chemistry Calculator</b>
</h4></a>
<button class="navbar-toggler" type="button"
data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav text-uppercase">
<li class="nav-item"><a class="nav-link active"
aria-current="page" href="/Chemistry-Calculator/">Home</a></li>
<li class="nav-item"><a class="nav-link active"
aria-current="page" href="/Chemistry-Calculator/about">About</a></li>
</ul>
</div>
</div>
</nav>
<div class="container" style="padding-top: 5%;">
<div class="card px-4 py-5" style="width: 650px;">
<div class="card-block">
<form action="/Chemistry-Calculator/Number-Of-Moles">
<div class="mb-3">
<label for="givenMass" class="form-label">Given Mass of
Substance</label> <input type="text" class="form-control" id="givenMass"
aria-describedby="emailHelp" name="givenMass"
value="${givenMass}" style="width: 600px">
</div>
<div class="mb-3">
<label for="molarMass" class="form-label">Molar Mass</label> <input
type="text" class="form-control" id="molarMass" name="molarMass"
value="${molarMass}" style="width: 600px">
</div>
<div class="mb-3">
<label for="moles" class="form-label">Moles</label> <input type="text" class="form-control" id="moles" name="moles" value="${moles}" style="width: 600px">
</div>
<input class="btn btn-outline-success" type="submit"
value="Calculate">
<div class="btn-group">
<button type="button" class="btn btn-success dropdown-toggle"
data-bs-toggle="dropdown" aria-expanded="false">Choose what to calculate </button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" onclick="readonlyForMoles()" href="/Chemistry-Calculator/Mole-Calculator">Calculate Moles</a></li>
<li><a class="dropdown-item" onclick="readonlyForMolarMass()" href="/Chemistry-Calculator/Mole-Calculator">Calculate Molar Mass</a></li>
<li><a class="dropdown-item" onclick="readonlyForGivenMass()" href="/Chemistry-Calculator/Mole-Calculator">Calculate Given mass</a></li>
</ul>
</div>
</form>
</div>
</div>
</div>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
crossorigin="anonymous"></script>
<script type="text/javascript" src="../javascript/script.js"></script>
<script>
function readonlyForGivenMass() {
document.getElementById("givenMass").readOnly = true;
document.getElementById("molarMass").readOnly = false;
document.getElementById("moles").readOnly = false;
}
function readonlyForMolarMass() {
document.getElementById("givenMass").readOnly = false;
document.getElementById("molarMass").readOnly = true;
document.getElementById("moles").readOnly = false;
}
function readonlyForMoles() {
document.getElementById("givenMass").readOnly = false;
document.getElementById("molarMass").readOnly = false;
document.getElementById("moles").readOnly = true;
}
</script>
</body>
</html>
Related Topics
Execute the Setinterval Function Without Delay the First Time
How to Edit a JavaScript Alert Box Title
Node.Js on Multi-Core MAChines
What Is the Meaning of the "At" (@) Prefix on Npm Packages
Define Global Variable with Webpack
Passing an Array as a Function Parameter in JavaScript
Are "(Function ( ) { } ) ( )" and "(Function ( ) { } ( ) )" Functionally Equal in JavaScript
Can (A== 1 && a ==2 && A==3) Ever Evaluate to True
Why Does a While Loop Block the Event Loop
JavaScript Unit Test Tools for Tdd
Extract Hostname Name from String
How to Set the Value Property in Angularjs' Ng-Options
How to Get the File Name from a Full Path Using JavaScript
Check Image Width and Height Before Upload with JavaScript