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");
};
Related
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:
How to add onload event to a div element
(26 answers)
Closed 3 years ago.
For example if I have in my body following
<button id="start"></button>
Is it possible to define in the HTML code a JS function that will be called when this element is loaded/shwon? So for example I can set some value of this element in JS? I know I can do in JS getElementBy... but that would be in the opposite direction I'm wanting to achieve this.
If yes, is it then possible to access the id of this html element in the called function?
var startNode = document.getElementById('start');
var observer = new MutationObserver(() => {
if(startNode.style.display !='none' ){
//when DOM is visible
}else {
//when DOM is hidden
}
});
observer.observe(startNode, { attributes: true, childList: true });
You can just use MutationObserver to observe the changes for specific element.
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
This question already has answers here:
In jQuery, how can I tell between a programmatic and user click?
(7 answers)
Closed 8 years ago.
In javascript/jquery, I have a button that have a click event defined like:
$("#target").click(function() {
var mouse_click = ________________;
// do stuff
if (mouse_click) {
// do stuff
}
// do stuff
});
and I also have code to do
$('#target').click();
How can I get the variable mouse_click to be true, if the user manually clicked the tag using the mouse, and the variable to be false when I click the tag using the .click() function?
Thanks
You could use this:
$("#target").click(function(e) {
var mouse_click = !(e.originalEvent === undefined);
// do stuff
if (mouse_click) {
// do stuff
}
// do stuff
});
or you could check e.isTrigger which is set whenever an event is triggered within jQuery. You'd just need to change the second line to:
var mouse_click = !e.isTrigger;
Both will work but you might prefer the second option as it's a little more concise.
Here it is working: http://jsfiddle.net/2U3Us/4/