I have a javascript button that fires an onclick event but i only want it to do that if another div contains a class called "active".
so I have this structure:
<div id="div1">
<div id="someid1" class="design"></div>
<div id="someid2" class="design"></div>
<div id="someid3" class="design"></div>
<div id="someid4" class="design"></div>
</div>
that based on other page activity any can change to class="active"
<div id="someid2" class="design active">
The button is:
<button type="button" id="button1" onclick="dosomething">Click me</button>
but i only want the dosomething to work if the above any of the divs has the active class, and throw an alert if it does not. I am not terribly good with javascript and could use some help.
Hope this is clear. Thanks.
Assuming dosomething is a function, you could just check for the class inside it
function dosomething() {
if ( document.querySelector('#parentid .active') ) {
// do stuff
}
}
querySelector returns null if not found, which is falsy.
document.querySelector documentation
Related
For example, if I have an HTML snippet like so:
<body>
<div id="1">
<span class="title">I'm a title!</span>
</div>
<div id="2">I'm the first element!</div>
<div id="3">I'm the first element!</div>
<body>
Obviously, if I wanted to get a specific element, say the div with id of 1, I could do something like
document.getElementById("1").addEventListener("mouseover", () => console.log("in div 1!"), false);
and that would output in div 1! whenever I hovered over it. But is there some javascript I can have that apply to every single element in body? To basically write some function like, getElementUserIsHoveringOver()?
I don't think addEventListener works on HTMLCollections, which was my only idea.
mouseover bubbles, so if you attach a listener to the <body>, you can watch for events and log the event.target:
document.body.addEventListener('mouseover', (e) => {
console.log(e.target);
});
<div id="1">
<span class="title">I'm a title!</span>
</div>
<div id="2">I'm the first element!</div>
<div id="3">I'm the second element!</div>
I'm recently learning JS/jQuery and I need help to apply a particular style/class to the top div when click the button inside it, but the problem is that the html has different sections with the same button and the same class on ancestor, and I want it to only apply to the actual div that contains the triggered button.
HTML:
<div class="class">
<div>
<div>
<button data-action="action">
<div class="class">
<div>
<div>
<button data-action="action">
SCRIPT:
$('[data-action="action"]').click(function() {
$(".class").addclass("new-class")
})
With this code obviously new-class is applied to all existing class classes regardless of the activated button.
Thanks!
Use the below code :
$('[data-action="action"]').click(function() {
$(this).closest('.class').addclass("new-class")
})
Use the "closest" which selects the first ancestor with a selector passed (in this case, first ancestor with "class" classname). The $(this) selector applies to the specific element that is clicked, in this case.
$('[data-action="action"]').click(function() {
$(this).closest(".class").addclass("new-class")
})
You can find the parent for the clicked element like this:
$('[data-action="action"]').click(function() {
$this.parents(".class").addclass("new-class")
})
You can provide id for the div along with class as..
<div class="class" id = "my_id">
<div>
<div>
<button data-action="action">
<div class="class">
<div>
<div>
<button data-action="action">
SCRIPT:
$('[data-action="action"]').click(function() {
$("#my_id .class").addclass("new-class")
})
try this it will work
<div>
<div>
<div class="one">child of 1 st Div</div>
</div>
<div>
<div class="two'>child of 2 st Div</div>
</div>
<div>
<div class="three">child of 3 st Div</div>
</div>
</div>
Here what I want to do is on clicking the div with class="one" I want to change the content of the third div where class="three"
You have a typo error here : <div class="two'> it should be this : <div class="two">
For the script, there are many way to do it, here is one :
$(function(){
$('.one').click(function(){
$('.three').text('hey');
});
});
Live example
In jQuery, you can attach a click event handler to a jQuery object using the click method. You select an element using the global jQuery function (usually jQuery or $). To select an element with a specific class, prepend . to the class.
$('.one').click(function(event) {
// this function will be fired when the div with class `one` is clicked
var $three = $('.three');
// $three is now a jQuery object representing the div
// DOM element with the class `three`
// your code here
});
First of all in your code you should correct your code for class = "two". In order to select a div use jquery .on() event handler.
$('selector').on('click',callback());
Refer to the following code.
$('.one').on('click',function(){
$('.three').addClass('changeColor');
})
I have also created a jsFiddle: https://jsfiddle.net/58kng68a/
I am searching for much time now, for a very simple and effective way to aasign function on the click of a button in javascript (not jQuery).
The problems that I have are : 1.sometimes the dom is not yet created and the javascript function has undefined vars in it. 2.I can't pass in the right way attributes to this function.
So baically i have these:
<div class="container">
<button type=button class="click">Click</button>
<div class="smallContainer">
<img src="source.com" class="myimage">
<div class="data"> some data</div>
</div>
</div>
<div class="container">
<button type=button class="click">Click</button>
<div class="smallContainer">
<img src="source.com" class="myimage">
<div class="data"> other data</div>
</div>
</div>
<div class="container">
<button type=button class="click">Click</button>
<div class="smallContainer">
<img src="source.com" class="myimage">
<div class="data"> usefull data</div>
</div>
</div>
for (){ assign in each button the onclick function}
function onclick(){
here i want to change the opacity of the image by the class "myimage",
take the innerHTML of the div by the class "data" and do something to it(maybe i ll send an ajax request in this function also)
}
So I need a for loop or something (inside the javascript file maybe), that will asign to all buttons this function. I need every time I click the button, the function to know which button is and what the div by the class "data" has inside.
I tried many ways, each one had problems. Can anyone help with a simple working solution?
Thank you
Since you mention you do not have the skills to do this simple in plain JavaScript, then it is time to get jQuery added to your toolbox.
Here is about all the code you would need
$function() { // when the page is ready
$(".click").on("click", function(e) { // assign a function to ALL class="click"
var id = this.id; // or $(this).attr("id"); - if you need the button's ID
var divContent = $(this).parents().find(".data").html()
$.get("someserver.php",{"id":id,"parm":divContent},function(data) {
alert(data);// from server
});
});
});
try using jquery library :) with that yoy can do codes like
<script>
$(".data").click(function(){
var class_value = $(this).html();
})
</script>
as you can see, the function will be applied to all element having tha class "data"
I have two classes and a function that works with one of them
$('.div-image').click(function(){ // image zoom
$('#image').attr("src",img_src);
$('.div-image').attr('class','div-image-big');
});
and html something like:
<div class="div-image">
<div id="wrapper">
<img id="image" src="image.jpg">
</div>
</div>
Why after first click on the image or (div .div-image) my class div-image is changing to div-image-big. But if we click once more the function $('.div-image').click(function(){...} will execute again. The question is why so? I don't need this behavior. I want that this function work only when class is div-image not div-image-big. Thanks.
The event handler is bound on the element, not the class. Which elements it is bound to is decided based on the class they have at the time that the event is bound, so changing the class later doesn't change which elements have the event handler.
If you want the event handler to react to the class, you should bind a delegate to the a parent element. That way the event bubbles to the parent element, and the delegate handler will check for the class at that moment. Example:
HTML:
<div class="image-container">
<div class="div-image">
<div id="wrapper">
<img id="image" src="image.jpg">
</div>
</div>
</div>
Javascript:
$('.image-container').on('click', '.div-image' ,function(){ // image zoom
$('#image').attr("src",img_src);
$('.div-image').attr('class','div-image-big');
});