Develop Reference

How to make the onclick Javascript element change text?

I was wondering how to make an onclick element change text with a button.
The button code:
<a class="button" id="cool" style="text-decoration: none; color: white; font-family: cursive"
onclick="document.getElementById('img').src='https://cdn.glitch.com/79c1be62-36ce-4443-9578-9779b5cb0a54%2Fterry-crews-person-of-year-2017-time-magazine-2.png?v=1619467585065'"
onclick="document.getElementById('cool').">make him cool?</a>
Please ignore the onclick style with the image, rather focus on the onclick element with the id "cool".
If I need to provide extra code as well let me know and I will do my best to provide it.

Here's three examples! The first one does it the way you wrote it -- with the function in the onclick attribute.
The second example shows how you can also use this instead of using getElementById, which is super useful especially if you copy the code into multiple places, since it references the element it's on directly instead of needing an ID.
Finally, the third example shows the recommended way to solve this problem -- passing this into an outside function. If you have a lot of extra code, you want to do this and not write the code directly into the onclick attribute to keep your HTML clean.
function changeText(el) {
el.innerHTML = "changed text";
}
<a class="button" id="btn1" onclick="document.getElementById('btn1').innerHTML = 'changed text';">unchanged text</a>
<br>
<a class="button" onclick="this.innerHTML = 'changed text';">unchanged text</a>
<br>
<a class="button" onclick="changeText(this)">unchanged text</a>

How to make this JS link work?

I want to put a site link in my site and I don't want to show it in the status bar, so I used this code below but it's not clickable.
<a rel"nofollow" href="javascript:;" onclick="location.href='http://sitelink">text</a>
And, is the rel"nofollow" work with this code?

Try:
<a rel="nofollow" href="#" onclick="location.href='http://sitelink'">text</a>
rel is an attribute so use an =
use # in the href so that the link does target the current page
in the onclick you have a mess with the quotes, you forgot the closing '
But instead of misusing an a tag you could also use a button or span for your purpose:
<button onclick="location.href='http://sitelink'">text</button>

Try this:
<a rel="nofollow" href="Javascript:void(0)" onclick="window.location='http://sitelink'">text</a>

Can I make a link point to a javascript function?

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

inline javascript in href

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.

How to call JavaScript function instead of href in HTML

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>