We Keep Coding

What does href=javascript:{} do?

What is the reason for using javascript:{} in the code below. Is it similar to href="javascript:" or href="javascript:void(0)"?
This is an example

Let hyperlink look like a link but didn't link anything.
This is an example
if you remove href attribute, that a tag will be normal text.

It makes a button act like a link, but lets you execute custom JS code instead of linking to a webpage.
For example:
Press me pls
acts like
<div onclick="doOnClick()"> Press me pls </a>
<script>
function doOnClick(){ document.write('hi u just pressed me'); }
</script>
but the browser treats the former like a link.

mustache js syntax to call a function with parameter?

I am using Mustache.js to create a template html and show set of tables.
I want to call a function inside this template with a parameter.
Every table generated from through mustache template is having a button on top of it.
I want to write a onclick function for this button.So I need the table name when processing the event.
Can someone give me the correct syntax to pass parameter?
<script id="TableTemplate" type="x-tmpl-mustache">
{{#tableDetails}}
<button type="button" id=Edit_{{tableName}} onclick="editTable({{tableName}})">
{{#tableDetails}}
</script>
function editTable(tableName){
console.log("tableName >>>"+tableName)
}
Thanks.

You are doing it almost right. Just add the quotes.
onclick="editTable('{{tableName}}')"

html anchor tag's onclick was not working

I was generating a table dynamically.
Inside the td data , there is a hyperlink.inturn it should call a function.
why the below code snippet was not working. Nothing happening when i click on the link.
<a href='#' onclick='function(){alert('hiii');}'>

It's because of conflicting ' and a funciton definition instead of call (thanks #user1389596):
<a href='#' onclick="alert('hiii')">
that should work. The extra 's inside of the onclick made the browser view it as the end of the onclick attribute, which isn't what you want. This way, using two different types of quotes, it works fine.
Or, even better, don't use inline handlers:
<a href='#' id="thethingy">
<!--in a galaxy far, far away:-->
<script type="text/javascript">
document.addEventListener('DOMContentLoaded',function(){
document.getElementById('thethingy').addEventListener('click',function(){
alert('hiii');
},false);
},false);
</script>

Event handlers added via innerHTML will not trigger in some cases for security reasons. It's also incorrect to include function () since all this onclick would do is define an anonymous function and do nothing else. You also have conflicting quotes.
If you are using jQuery, event delegation would make this simpler. Exclude onclick entirely and use something like:
$(document).on("click", "a", function () { alert("hiii"); });
document and a selectors should be as specific as possible.
You can also bind events to elements added to the DOM as needed.

1st Issue
onclick='function(){alert('hiii');}'
This seriously is wrongly coded as per the use of quotes. The proper usage should be any of the following
Proper use of quotes
onclick='function(){alert("hiii");}'
or
onclick="function(){alert('hiii');}"
This much only about the syntax. But there is still something to be done to actually call the function at runtime. Without proper invocation the function will not be executed. That is the 2nd issue.
2nd Issue
Now there are 2 syntax that you may follow to actually execute the function at runtime.
1st syntax:
(function(){...})();
So the code should be-
onclick="(function(){alert('hiii');})();"
Fiddle Demo1
2nd syntax
new function(){...};
So the code should be-
onclick="new function(){alert('hiii');};"
Fiddle demo2

You are defining a function... not calling it.

try this:
<a href="javascript:alert('hi');">

You should not use onclick="function(){alert('hiii');}". You may try this code:
<a href="#" onclick="alert('hiii');">

<a onclick='function(){alert('hiii');}' href='#' >
try this one it will work without any problem, no need for event listeners

Although this a quotes problem. Following will solve your problem.
<a href='#' onclick="alert('hiii')">
In case you are using Vue.js like me onclick will not work. You can use this.
<a href="javascript:void(0);" #click="alert('hiii')">

Maybe this can be of help to someone,
At first I thought it was due to the fact that href was present, and inserted before the onclick event.
However here is a sample of an a tag that calls a function and passing a parameter.
Both Samples has the onclick event and href properties in different orders.
function helloWorld(message){
alert('Hello world! : ' + message);
};
Click Me (href then onclick)
<br>
<br>
<a onclick="helloWorld('onclick before href')" href="#">Click Me (onclick then href)</a>
};

Javascript, HTML and onClick - Function is not defined

I'm trying to make an "Insert link" button to a Rich Text Editor in Javascript. Basically, what it'll do is adding the following code to its content:
textGoesHere
The catch is, someJSFunction() must fire when the user clicks on the button inside the editor itself. I wrote a Javascript function which adds that code when the Insert Link button is clicked on, like this:
editor.setContent(previousContent + theHtmlCode);
However, when I click on the link someJSFunction() doesn't fire, and instead I get a "Function is not defined" error. I tried to define someJSFunction() in the global scope, but it still won't see it. The weird thing is, even if I do something ugly like adding
<script type="text/javascript"> *(I define someJSFunction() here)* </script> textGoesHere
to the editor's content it'll still throw the same error. I've seen a few people in SO with the same problem, but they somehow managed to solve it by defining their functions in the global scope.
Notice that I can't edit the HTML code directly, which is why I have to resort to using a piece of Javscript which will insert a piece of HTML which in turn will call another piece of Javascript.
And before you ask, no, I won't use JQuery.

Avoid event declare in HTML
Avoid constant
The code below should works.
HTML
<textarea id="editor"></textarea>
<a id="link" href="#">Link</a>
Javascript
var link = document.getElementById('link');
link.addEventListener('click', editContent);
function editContent() {
var editor = document.getElementById('editor');
editor.value += "text";
}
The jsfiddle for the example above https://jsfiddle.net/ar54w16L/
Enjoy !

Try onclick instead onClick in html.

How to show loading image(GIF) until Script function is Finished

I have a html button. Code is given bellow,
<div id="apDiv1">
<input name="wpost" type="button" value="Publish" onClick="wall_publish()"/>
</div>
When a user click 'Publish' button it calls 'wall_publish()' script function which is in the same page.Code of the 'wall_publish()' function is given bellow,
<script>
function wall_publish(){
//some codes...
}
</script>
I need to display a loading gif image near my 'Publish' button until Script function is finished.
Can anyone please tell me how to do this?

you should show the picture do the job then remooove it again just that simple
function show pic();
function do job();
function remove pic();

If you have no idea about how to show a picture i think you should go check java-script doc's
if you try to make the pic invisible i can suggest you use the jquery library and just addthe line
$('#img').hide(); to hide it and $('#img').show(); to show it ;
this is not very specific but you sshould go throu that
i think you HTML code but not sure
<img src="the adress of the image" id="gif" />

The best way to show/remove any html is by making use of the display property.
Create a hidden image.
function wall_publish(){
document.getElementById('loading').style.display='inline'; /* display it */
// do what you need here
document.getElementById('loading').style.display='hidden'; /* put it away again */
}
There are, of course, a dozen way to do this. I picked the most straight-forward easy approach that I used to use when I first started to learn javascript.