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
Related
this might be very basic but I am still trying to figure it out because I cannot seem to get it correct.
The button
<a class="fusion-button button-flat button-square button-xlarge button-default button-40" target="_blank"><span class="fusion-button-text fusion-button-text-left">KÖP DITT CAMPINGKORT HÄR!</span></a>
And I need to add this
Köp Camping Key Europe
Some things needs changing such in the next code but you get the idea, how can I make button work, so when they press it it open module? When I use the second code without button and only link, it works fine, module shows up.
Please help :)
Try this
<button type="button" class="fusion-button-text fusion-button-text-left"
onclick="CampingKeyEurope(' blank', 'sv')">Button Text</button>
Building off the comment by Sterling Archer, you should attach event listeners outside of your HTML, so if you are using JQuery, in your $(document).ready() function you would add your onclick event there to your button like so:
$('.fusion-button-text.fusion-button-text-left').on('click', function() {});
Try using an event listener:
<a id="btn" class="fusion-button button-flat button-square button-xlarge button-default button-40" target="_blank">
<span class="fusion-button-text fusion-button-text-left">KÖP DITT CAMPINGKORT HÄR!</span>
</a>
document.getElementById('btn').onclick = function () {
CampingKeyEurope(' blank', 'sv');
};
I suggest looking through here, Its very useful: https://www.w3schools.com/jsref/event_onclick.asp
I want to call a javascript and jump to a specified div by clicking on Text.
Here is the javascript I am using:
function hide(parameter) {
document.getElementById(parameter).style.visibility = "hidden"
}
and here the text that should call it:
<a id="text" href="Page.html#foo" href="javascript: hide('text')">Text Text</a>
I just don't know why it doesn't work.
You cannot add a second href attribute to your a tag. Try onclick instead:
<a id="text" href="Page.html#foo" onclick="hide('text')">Text Text</a>
#user3155154's answer is the "best" way to do it, but, if you're interested, this will work too:
<a id="text" href="javascript:hide('text');window.location.href='Page.html#foo';void(0)">Text Text</a>
I have a link that looks like this:
<p class="half_text"><?php echo $upvotes; ?> <strong>
<a id="vote_up" style="color: #295B7B; font-weight:bold;" href="">Vote Up</a>
</strong> | <?php echo $downvotes; ?> <strong>
<a id="vote_down" style="color: #295B7B; font-weight:bold;" href="">Vote Down</a>
</strong></p>
and some jQuery code that I am trying to get called.
<script type="text/javascript">
$('#vote_up').click(function()
{
alert("up");
});
</script>
But for some reason the alert does not fire when the vote up or down links are pressed. Any idea what I am doing wrong?
You can see this for yourself here: http://www.problemio.com
You need to place your code inside the .ready() handler:
$(document).ready(function() {
$('#vote_up').click(function()
{
alert("up");
//Return false to prevent page navigation
return false;
});
});
Take a look at the .ready() docs: http://api.jquery.com/ready/
Here's a working jsFiddle.
Wrap your code in a .ready() handler. The shortcut is $(function(){...}):
$(function(){
$('#vote_up').click(function() {
alert("up");
});
})
is equivalent to $(document).ready(function(){....}).
Not sure if it's necessary but try putting a # in the href attribute.
Also, you are using id attributes for your links when there are more than one of each on the page, you should use class instead.
The id attribute is supposed to be unique across a document. If you want it to apply to multiple elements, consider using a class instead.
Not sure if this is causing your problem but you have duplicate ids on your page.
Try changing 'vote_up' and 'vote_down' to classes.
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.
I have some mockup in HTML
<img title="next page" alt="next page" src="/themes/me/img/arrn.png">
I got the response from server when I sent the request.
With this mockup I got as a response of AJAX request that sends my code to server.
Well, everything is fine but when I click on the link the browser wants to open the function as link; meaning after click I see the address bar as
javascript:ShowOld(2367,146986,2)
means browser thing that's url if I want to do this in firebug that's work. Now I want to do that then when anyone clicks the link then the browser tries to call the function already loaded in the DOM instead of trying to open them in browser.
That syntax should work OK, but you can try this alternative.
<a href="javascript:void(0);" onclick="ShowOld(2367,146986,2);">
or
<a href="javascript:ShowOld(2367, 146986, 2);">
UPDATED ANSWER FOR STRING VALUES
If you are passing strings, use single quotes for your function's parameters
<a href="javascript:ShowOld('foo', 146986, 'bar');">
If you only have as "click event handler", use a <button> instead. A link has a specific semantic meaning.
E.g.:
<button onclick="ShowOld(2367,146986,2)">
<img title="next page" alt="next page" src="/themes/me/img/arrn.png">
</button>
Try to make your javascript unobtrusive :
you should use a real link in href attribute
and add a listener on click event to handle ajax
I use a little CSS on a span to make it look like a link like so:
CSS:
.link {
color:blue;
text-decoration:underline;
cursor:pointer;
}
HTML:
<span class="link" onclick="javascript:showWindow('url');">Click Me</span>
JAVASCRIPT:
function showWindow(url) {
window.open(url, "_blank", "directories=no,titlebar=no,toolbar=no,location=no,status=no,menubar=no,scrollbars=yes,resizable=yes");
}
Your should also separate the javascript from the HTML.
HTML:
<img title="next page" alt="next page" src="/themes/me/img/arrn.png">
javascript:
myLink = document.getElementById('function-click');
myLink.onclick = ShowOld(2367,146986,2);
Just make sure the last line in the ShowOld function is:
return false;
as this will stop the link from opening in the browser.
<a href="#" onclick="javascript:ShowOld(2367,146986,2)">
href is optional for a elements.
It's completely sufficient to use
<a onclick="ShowOld(2367,146986,2)">link text</a>