I would like to make the href attribute of my anchor tag to call a method instead of going to some url. I know that in plain js I can do this:
..href={"javascript: foo(value)">
So I've done the same in my jsx file:
<a href={javascript: ()=>foo(value)}>Click Here!</a>
but it doesn't work.
How it can be done?
use reacts onClick
You can use onClick on an element in react.
like this
<a onClick={()=>foo(value)}>Click Here!</a>
That being said, if the purpose of your a tag is not to go to a link then your html is incorrect and you should think about using a button tag instead
in React use onClick to do the job
<a onClick={() => doSomething("Hello") }>Click Me</a>
Related
I have the following html code:
<a class="button-dashboard-save" href="#" onclick="return interface.saveChanges();">Save</a>
inside the interface.saveChanges() i want to get the element object that fired that function, I mean the whole a element.
Regards,
If I have understood correctly, you want to reference the anchor element <a> inside interface.saveChanges. In this case you can directly pass the this keyword to the function. The code should look like:
<a class="button-dashboard-save" href="#"
onclick="return interface.saveChanges(this);">Save</a>
Use this inside the inline onclick. It will pass the current clicked element in your case.
<a class="button-dashboard-save" href="#" onclick="return interface.saveChanges(this);">Save</a>
Define a event handler function ( using jquery for simplicity ):
$(".button-dashboard-save").click ( function ( eve ) {
return interface.saveChanges ( eve.target );
});
This provides interface.saveChanges with the triggering element as a parameter.
Your html slightly simplifies:
<a class="button-dashboard-save" href="#">Save</a>
I am trying to make it so that when I click an <a> tag a <div> appears on the first click and disappears on the second.
Easy enough right?
Just do this...
<a href ng-click="clicked=!clicked">Click me</a>
<div ng-show="clicked">
SOME CONTENT HERE
</div>
and that works perfectly.
But what I'm doing is setting a variable in Python equal to this <a href='"#"' ng-click='"clicked=!clicked"'>Click me</a> and then passing that through Flask into the front end (HTML). The passing works perfectly. It shows exactly the same code as I want it to (see below).
<a href ng-click="clicked=!clicked">Click me</a>
But for some reason, when I pass it, it loses the ng-show/ng-click functionality. When I click, nothing appears or disappears.
Why is this?
I know this is super simple, but I can't work it out (I'm a designer).
I want to simply populate the href attribute value of the <a> tag, with the value of the src attribute of the <img> tag. So the image links to itself basically.
the image src will be updated through a super simple CMS and I want the link to dynamically update, instead of the user having to update the URL also.
I tried something like this, but it didn't work.
<a rel="lightbox[job1]" href="()document.getElementById("gal1_img1").src">
<img id="gal1_img1" src="images/gallery/job1/image-1.jpg">`enter code here`
</a>
You cannot inline JavaScript inside attributes the way you have currently. You can add a script to the page to do this:
<a id="link" rel="lightbox[job1]" href="#">
<img id="gal1_img1" src="images/gallery/job1/image-1.jpg">`enter code here`
</a>
<script>
document.getElementById("link").href = document.getElementById("gal1_img1").src;
</script>
try this as your <a>'s href:
href="javascript:window.location=this.getElementsByTagName('img')[0].src;"
Assuming there's only ever one image inside these <a> tags, this should work for anyone who's NOT running with javascript disabled.
try this.
var att = $('#gal1_img1').attr('src');
$("a[rel*='lightbox[job1]']").attr('href',att);
My code is:
<input class="button" type="button" value="Mark" onClick="doCheck('mark');" \>
I want to make it using an
<a>
link. Is it possible to do this? I only know how linking to another page.
Use Like that
<a class="button" href="javascript:void(0)" onClick="doCheck('mark');" >Mark</a>
or this way
<a class="button" href="javascript:doCheck('mark')" >Mark</a>
< a href='javascript:void(null);' onclick='doCheck()' > Test </a>
<a onClick="doCheck('mark');"> Mark </a>
You can attach click handlers to any DOM element that is visible on the page. I would seperately recommend seperation of markup and javascript.
So something like.
<a id="mark">
...
<script type="text/javascript">
$(function() {
$("#mark").click(function() {
doCheck("mark");
});
});
</script>
Would be preferable. In this case $ is jQuery. A pure javascript solution is possible but that has a lot of boilerplate code that hides the point.
You can use the onClick attribute on any html element. So use it in your a tag or in your img tag.
This code example will execute the JavaScript without following the link:
Mark
If you want to follow the link, drop the return false; part:
Mark
How can you do something like this:
<a href="some javascript statement that isn't a function call;" >myLink</a>
And have the js in the href execute when the link is clicked.
Just put the JS code directly in there:
fsljk
Though, you should not be doing inline scripting. You should unobtrusively attach event handlers.
<a id="lol" href="/blah">fdsj</a>
<script>
document.getElementById('lol').onclick=function() {
/* code */
};
</script>
<a href="javascript:var hi = 3;" >myLink</a>
Now you can use hi anywhere to get 3.
You can write inline-code in the same way as
<a href="javascript:[code]">
This method is also available in other tags.
addition
if you want to Execution when something tag clicking, you can fix with onClick attribute
<a onClick="function()">
I know this question is old but I had a similar challenge dynamically modifying the href attribute that sends an email when the anchor tag is clicked.
The solution I came up with is this:
$('#mailLink,#loginMailLink,#sbMailLink').click(function () {
this.setAttribute('href', "mailto:" + sessionStorage.administrator_mail_address + "?subject=CACS GNS Portal - Comments or Request For Access&body=Hi");
});
<a id="loginMailLink" href= "#" style="color:blue">CACS GNS Site Admin.</a>
I hope that helps.