This question already has answers here:
Why can't I use onClick to execute a function inside a jQuery $(document).ready function?
(8 answers)
Closed 6 years ago.
I am getting error SelectAll is not defined when i click on select all button.
function selectAll(){
$('#langtabs').data('tabSelect').selectAll();
}
Here is Fiddle
Move this function
function selectAll(){
$('#langtabs').data('tabSelect').selectAll();
}
Outside the $(function(){ .... }); otherwise it wont be in global scope which is where onclick will be looking for it.
Fiddle
Related
This question already has answers here:
addeventlistener not working, event not waiting for on click
(2 answers)
Closed 2 years ago.
function hide(c1) {
document.getElementById(c1).style.display = "none";
}
document.getElementById("red-circle").onclick = hide("red-circle");
When the page loads, the red circle is automatically hidden. I am trying to understand how to define the "hide" function to call it later while passing the name of the item to be hidden.
It's because in the code you posted, you are trying to set the onclick event to the return value of the hide function, instead of the hide function itself. Try this:
function hide(c1) {
document.getElementById(c1).style.display = "none";
}
document.getElementById("red-circle").onclick = function(){
hide("red-circle");
};
This question already has answers here:
Why does jQuery or a DOM method such as getElementById not find the element?
(6 answers)
Event binding on dynamically created elements?
(23 answers)
Closed 3 years ago.
I try to run the following code in Javascript :
function test(){
if(document.querySelector('.js-pricing')){
var checkbox = document.querySelector(".js-pricing");
alert('is working');
checkbox.addEventListener('change', function(){
if(this.checked) {
console.log('is-checked')
} else {
console.log('is not')
}
})
}
}
test();
to know when my checkbox is checked or not, the EventListener is not working I have none console.log in my console but my alert() is working well, I guess the element is well detected when the page is loaded but can't handle the event listener.
Also tried with document.ready to start the event but it does not work
I have the same result when I try with a getElementById.
Here is my html (in jade) line for the input :
input(type="checkbox", name="pricing", id="pricing", checked).switch__input.js-pricing
Do you know how to run the EventListener properly?
This question already has answers here:
JavaScript click event listener on class
(8 answers)
Closed 3 years ago.
I am just trying to set up a simple addEventListener but it is giving me type error.
I've tried switching the order of my js but nothing seems to work.
// my script
const serviceContainer = document.getElementsByClassName("serviceImg-container");
serviceContainer.addEventListener('click', function(){
alert("Hellooo worlddd!!");
});
I prefer working with id's makes it easier because there can only be one Id.
<div id='serviceImg-container'><img src='someimage.com'/></div>
document.querySelector('#serviceImg-container').addEventListener('click', function(e) {
alert('hello world!');
}
This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed 7 years ago.
i have this button inside a popup.(in a javascript file)
'<div class="thisdiv" >'+
'<button class="btn btn-primary" >this</button>'+
'</div>'+
and i am accessing this in function
$('.thisdiv').on('click', function (e) {
$('.overlay').hide();
$('body').removeClass('overflow');
});
this is basically supposed to be a button which, when clicked, closes the pop up. (the simple cross button)
but it does not work. it does not go into the function, i was told to use delegates. but shouldn't this be the simpler method? what am i missing?
Seems like you are creating the elements dynamically. Then you need to use event delegation,
$(document).on('click', '.thisdiv', function (e) {
$('.overlay').hide();
$('body').removeClass('overflow');
});
This question already has answers here:
passing parameter to javascript onclick function
(3 answers)
Closed 8 years ago.
Is there any possibilities to use the onclick HTML attribute to call
more than one jQuery functions
onclick="$('#editParentDetailsViews').removeClass('tab selected');$('#editStudentDetailsPopupPnl').hide(); return false;"
Here, the first function work properly and the 2nd function not working.
I suggest you these ways:
1-addEventListener:
document.getElementById('btn').addEventListener('click', function(){
function1();
function2();
});
2-inline (onclick)
onClick="function1();function2();"
3-Jquery Standard click function:
$("button").click(function(){
//Your functions code here
});
4-Jquery on:
$('#button').on('click',function(){
//Your code here
})
You can find more ways...
Why dont you use jquery click() listener? Do not mix dom with jquery. Keep it simple.
$(yourselector).click(function(){
//call some funtions
});
<div id="yup">click me</div>
js
$(function(){ // same as $(document).ready()...
$('#yup').on('click',function(){
// call function 1
// call function 2
// call function 3
// ...
});
});
DEMO