Is there any kind of difference between the following two lines of code in javascript:
<button id='btn1' onclick='do_this();'>Button 1</button>;
<button id='btn1' click='do_that();'>Button 2</button>;
//some script later
function do_this()
{
alert('this');
}
function do_that()
{
alert('that');
}
onclick works in javascript, click doesn't. If you want click to work, you might need jQuery.
Related
I am trying to create a hint Button that displays the text when it is clicked. I know how to create using javascript in HTML but I am having difficulty creating it in jquery. Can somebody please give me an idea.
javascript code in HTML:
<button type="button" onClick="myFunction()">Hint!</button>
<p id="hint"></p>
<script>
function myFunction() {
document.getElementById("hint").innerHTML = "<em><u>hint here.</u></em>";
}
</script>
Assuming you have only one button, you can bind the event click and use the selector #hint.
The function $.html is used to set HTML code to the selected elements.
$('button').on('click', function() {
$("#hint").html("<em><u>hint here.</u></em>");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button">Hint!</button>
<p id="hint"></p>
Here is my code, I would like to know why does display() executes but show() doesn't. There must be a logic behind it right. Please enlighten me.
<html>
<head>
</head>
<body>
<button id="b1" onclick="show()">Show</button>
<p id="p1"></p>
<p id="p2"></p>
<body>
<script>
function show()
{
document.getElementById("p1").innerHTML="Hello";
}
document.getElementById("b1").onclick=display;
function display(){
document.getElementById("p2").innerHTML="World";
}
</script>
</html>
This would work if you have only one of the two. The problem is that the second bit of code will overwrite the onclick handler, which is why the first one is never called.
You could use addEventListener, which will not overwrite the existing listener(s), but add an extra one. That way, both will fire, although I think formally you can't be guaranteed of the order. In this particular scenario that shouldn't matter though.
function show()
{
document.getElementById("p1").innerHTML="Hello";
}
function display()
{
document.getElementById("p2").innerHTML="World";
}
document.getElementById("b1").addEventListener('click', display);
<button id="b1" onclick="show()">Show</button>
<p id="p1"></p>
<p id="p2"></p>
As mentioned in the comments, it's better to avoid inline JavaScript completely and get rid of the onclick attribute from your markup. But in some cases (maybe when you're stuck on WordPress or some other framework that relies on those inlined event handlers), you can't get rid of those. In that case, you can still use addEventListener as demonstrated to add your own event handler without interfering with the existing functionality.
For the same reason that:
document.querySelector("P").innerHTML = "Replaced";
<p>Original</p>
… shows "Replaced".
You overwrote the onclick function with a new one, completely replacing the old one.
Avoid onclick attributes and properties. Use addEventListener instead.
function show() {
document.getElementById("p1").innerHTML = "Hello";
}
function display() {
document.getElementById("p2").innerHTML = "World";
}
const b1 = document.getElementById("b1");
b1.addEventListener("click", show);
b1.addEventListener("click", display);
<button id="b1">Show</button>
<p id="p1"></p>
<p id="p2"></p>
onclick property of the EventHandler is for processing click events on a given element.
for onclick event ,you have assigned new function object through
document.getElementById("b1").onclick=display;
Only one onclick handler can be assigned to an object at a time
<body>
<button id="b1" onclick="show()">Show</button>
<p id="p1"></p>
<p id="p2"></p>
<body>
<script>
function show()
{
document.getElementById("p1").innerHTML="Hello";
}
document.getElementById("b1").onclick=display;
function display(){
document.getElementById("p2").innerHTML="World";
}
</script>
You can only bind onclick with one method either display or show
I have codes :
HTML :
<div class="modal-footer" >
<button type="button" class="btn btn-sm btn-default" id="mybutton" style="background-color: #367E2D; color:white; opacity: 1" onclick="chooseme();">OK</button>
</div>
Javascript :
('#mybutton').click(chooseme('123'));
Purpose :
I want to change onClick event from chooseme() to chooseme('123') using Javascript
And the result of the code above is :
chooseme('123') executed immediately (not when the button clicked)
Question is : Anyone can explain what's wrong with my code? and what is
the correct implementation to reach the purpose above?
I assume from the syntax that you're using jQuery. When binding events to named functions in JS, you need to pass the function itself to the callback. With your current syntax, you're passing the return value from chooseme() to the click handler. As a result, the function is called immediately on page load.
Wrap the hander inside an anonymous function, and you're good to go:
$('#mybutton').on('click', function() { chooseme('123') });
I've tried to change the onclick function through a bookmarklet in the url using this code:
javascript: document.getElementById('Button1').onclick = function(){alert('foo')};void(0);
I can change the value of the button but just not the onclick function. Is it even possible?
Thanks ^^
Some notes: I've also tried putting the code in a .js file and creating an external .js file using createElementId but it still does not seem to work :/
You were missing the trailing semi-colon to terminate the alert call. It's easier to spot once you indent it:
document.getElementById('Button1').onclick = function() {
alert('foo');
};
This code works. So the only option is that Button1 is not an ID of an element on that page.
For example:
<div id="Button1">Button</div>
If an element on the page looks like that, you will get your alert ('foo');
Your code seems to work...
Try to insert this code into the w3schools jseditor http://www.w3schools.com/js/tryit.asp?filename=tryjs_events
<html>
<body>
<button type="button" id="Button1" onclick="alert('Some action');">Action!!</button>
<button type="button" id="Button2" onclick="document.getElementById('Button1').onclick = function(){alert('another action')};">Change onclick</button>
</body>
</html>
I am new to javascript/jquery .
I have a small question.
I have some thing like the following in the java script file.
<button id="button1" onclick=click() />
<button id="button2" onclick=click() />
<button id="button3" onclick=click() />
so the click function looks like the follwoing
click(id){
/do some thing
}
so my question is when ever the button is clicked how can we pass the button id to the function.
<button id="button1" onclick=click("how to pass the button id value to this function") />
how can we pass the button id like "button1" to the click function when ever the button is clicked..
I would really appreciate if some one can answer to my question..
Thanks,
Swati
I advise the use of unobtrusive script as always, but if you have to have it inline use this, for example:
<button id="button1" onclick="click(this.id)" />
The unobtrusive way would look like this:
$("button").click(function() {
click(this.id);
});
You don't need to.
function handleClick(){
//use $(this).attr("id");
//or $(this) to refer to the object being clicked
}
$(document).ready(function(){
$('#myButton').click(handleClick);
});
That not very jQuery-ish. You should rather use event listeners:
$(function() {
$('#button1,#button2,#button3').click(clicked);
function clicked() {
// "this" will refer to the clicked button inside the function
alert($(this).attr('id'));
}
});
For starters: Don't use onclick(). This is the way to do it properly.
When you get your head around all this and think "boy that's a load of cowpat to write for a litte event!", turn towards jquery.
Doing the same in jquery is simple.