Develop Reference

Script Revision for event.target

I'm kind of a newbie to js, could someone have a look at this code and tell me if it is correct and if it could be improved and how? it is working as intended, but honestly I don`t know if it is well written. Thanks in advance (:
<script>
$(document).ready(function() {
$("button").click(function(event) {
var a = (event.target).classList.item(0);
var b = ".carousel" + "." + a ;
$(b).myfunction;
});
});
</script>
The reason for that script is that I have a Carousel (Bootsrap) inside a Slider ("JQuery lightSlider") inside a custom popup modal and I don`t want the imgs carousel to load at page start only when the carousel would be visible.
What the script does is to "store" the class name of the button element ("custom-n") clicked, then write .carousel.custom-x to be stored in the variable b, and then use the var b as a selector to call the function for that custom-n carousel that replaces data-src with src.
I hope this isn't confusing haha
This is a simplification of the html, the modal opens whenever a <button> is clicked.
The are kind of a "thumbnail" for the main slider (light-slider), so:
<button class="custom-1"> opens the modal and set the "light-slider" to slide n1
<button class="custom-2"> opens the modal and set the "light-slider" to slide n2
and so on.
The carousels inside the lightslider's slides they all have img with data-src and the Idea is to replace the data-src with src of the carousel that should be "related" to the custom
<div class="light-slider-buttons">
<button class="custom-1 myclass"></button>
<button class="custom-2 myclass"></button>
<button class="custom-3 myclass"></button>
</div>
<div class="modal-wrp">
<div class="modal-inner">
<ul id="light-slider">
<li>
<div class="slide-wrapper">
<div class="carousel custom-1">
<div class="carousel-inner">
<div class="carousel-item active">
<img data-src="...">
</div>
<div class="carousel-item">
<img data-src="...">
</div>
<div class="carousel-item">
<img data-src="...">
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>

The code looks good.
I have two suggestions.
Firstly, you seem to be using class attribute to store data (custom-1, etc)
Why not set it to data-item-class attribute instead (any name starting with data- will do)?
<div class="light-slider-buttons">
<button class="myclass" data-item-class="custom-1"></button>
<button class="myclass" data-item-class="custom-2"></button>
<button class="myclass" data-item-class="custom-3"></button>
</div>
The value can be read as event.target.dataset.itemClass (item-class becomes itemClass, see docs for more info).
The code for variable a will be replaced with:
var a = event.target.dataset.itemClass;
Secondly, setting click event handler for 'button' selector is too wide.
It will cause errors when new button element with another purpose gets added to your page in the future.
It is much safer to think of <div class="light-slider-buttons"> as a component wrapping your button elements and apply the click handler only to those.
$(".light-slider-buttons button").click(function(event) {
...
}
It does not change much but is important because if you add other buttons outside <div class="light-slider-buttons"> they will not get click event handler.
jQuery uses CSS selectors syntax, you can find more in docs.
Here's the recommended code for script tag
<script>
$(document).ready(function() {
$(".light-slider-buttons button").click(function(event) {
var a = event.target.dataset.itemClass;
var b = ".carousel" + "." + a ;
$(b).myfunction;
});
});
</script>
P.S. jQuery programming style is quite imperative (specifying how page should update on every event).
There are other ways to build UI, for example in React programming is declarative (specifying how UI should look like based on given input/state)

How can I wrap an image within anchor tag for like and dislike functionality

I need to wrap a heart-shaped image within the anchor tag for like and dislike function. I did but the corresponding image is behaving like an anchor tag. when I click on the image I am navigating to a particular link which I mention.
What I want is when I click on the image I just want to invoke a function for like and dislike.
<a>
<div className="hidden">
<div className="hx-243px bg-cover transitionAll-0p3 slide-item-img no-selectable" style={{backgroundImage: `url(${thumb})`}}>
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgATURjH/98kkVJUXIjYg3griojiRcEN6sEFQuYlnYMeSjxYRRBPntzSg3oSRPBgQ==" style={{float: "right", padding: "5px", display: "inline-block"}}></img>
</div>
</div>
</a>
Thanks in advance

You need to add event listener on anchor tag click, and then prevent default event.
Check these links:
https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener
https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault
TL;DR
Code would be something like that
<a href="javascript:;" id="like">
<img src="heart.png"/ alt="like">
</a>
<script>
var likeButton = document.getElementById('like');
likeButton.addEventListener('click', function (event) {
event.preventDefault();
// actual like implementation
});
</script>

Fire onclick event based on class of another div?

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

I Have A Dialog That Displays But Only One Button Changes the Cursor

I have what is probably an incredibly simple question, but I don't know how to resolve it and any help would certainly be appreciated.
Here's my code;
<div id='div2'>
<div class="DoYouHaveADirtBikeForSaleBox" id="DoYouHaveADirtBikeForSaleBox">
<h2>Got A Bike to Sell?</h2>
<p class="BikeForSaleButton">
Yes
</p>
<p class="BikeForSaleButtonNo">
<a onclick="javascript:var div = document.getElementById('div2');div.parentNode.removeChild(div);">No</a></p>
</div>
</div>
For a reason unbeknownst to me, the "No" link is not changing the cursor to a hand when hovered over but I haven't a clue how to address this.
I would suspect the problem is arising because the NO link doesn't have a href but being that I'm very novice I don't know how to remedy the situation so I ask that someone could please show me how to resolve this and I thank you in advance.

because you have no href attribute on the link. Add one and the cursor will change.
NITPICk: drop the javascript: it is not needed.

Add href ="#" to make it look like a link and not to navigate to a different page
<div id='div2'>
<div class="DoYouHaveADirtBikeForSaleBox" id="DoYouHaveADirtBikeForSaleBox">
<h2>Got A Bike to Sell?</h2>
<p class="BikeForSaleButton">
Yes
</p>
<p class="BikeForSaleButtonNo">
<a onclick="javascript:var div = document.getElementById('div2');div.parentNode.removeChild(div);" href ="">No</a></p>
</div>
</div>

The onclick event handler needs to supress the links default behavior to navigate to what's specified in the href attribute.
so you need href="#" also you dont need that javascript:
It should be like this:
<p class="BikeForSaleButtonNo">
No</p>
Here is a link to show the working code:
http://jsfiddle.net/dkU7B/1/
Edit: Forgot to mention another thing you can do is get rid of the onclick entirely and just use the href with javascript like so, but now you will need to use the javascript: just a neat trick.
No

You need an href="#", and I would separate your HTML and JS, it's just cleaner IMO:
<script>
var div = document.getElementById('div2');
function rmv() {
div.parentNode.removeChild(div);
}
</script>
<div id='div2'>
<div class="DoYouHaveADirtBikeForSaleBox" id="DoYouHaveADirtBikeForSaleBox">
<h2>Got A Bike to Sell?</h2>
<p class="BikeForSaleButton">
Yes
</p>
<p class="BikeForSaleButtonNo">
No</p>
</div>
</div>

Making ahref from a div

I have a div as follows:
<div class="slide_items">
<div class="slide_item"><img src="image"/></div>
<div class="slide_title">title</div>
</div>
What i want to do is, instead of having URL in each item in slide_items div. I want user to click on <div class="slide_items">. I want the slide_items to be clickable as the div itself, rather than putting a href in every inner div.
How can i do this?

The proper way would be to use a single link (but change the inner elements to span for validness)
<a href="/url" class="slide_items">
<span class="slide_item"><img src="image"/></span>
<span class="slide_title">title</span>
</a>
And make sure that they are treated as block elements from the css
a.slide_items, a.slide_items span{
display:block;
}
If you have to go the div way, then use
<div class="slide_items" data-href="/url">
<div class="slide_item"><img src="image"/></div>
<div class="slide_title">title</div>
</div>
and add a script (since you use jquery)
$(function(){
$('.slide_items').click(function(){
var href = $(this).data('href');
window.location = href;
});
});

You can add onclick="window.open('google.com')" event to simulate a link to your div.
In the case where you want the entire div to appear to a be a link, you will want to change your cursor. Add style="cursor: hand; cursor: pointer;" to your div as well.

You can add an onclick property to the div:
<div class="slide_items" onclick="location.href='/url';" >
<div class="slide_item"><img src="image"/></div>
<div class="slide_title">title</div>
</div>

you can use some simple javascript to get this done
use the onclick() event
so your HTML code looks something like
<div class="slide_items">
<div class="slide_item" onclick="function1()"><img src="image"/></div>
<div class="slide_title" onclick="function2()">title</div>
</div>
your javascript code will look like
function function1(){
// insert your code here
}
function function2()
{
// insert your code here
}
the code can be done in many ways depending on what you want , if you just want to redirect to another div , use the display attributes alternating between none and block , more reference here documentation .
if you want to redirect to another site you can use
window.open("your url")

<div class="slide_items">
<div class="slide_item"><img src="image" alt="my image" /></div>
<divclass="slide_title">title</div>
</div>
js:
$(function() {
$('.slide_items').click(function() {
window.location = 'http://www.google.com';
});
});
css:
.slide_items:hover {
cursor: pointer;
}
http://jsfiddle.net/68Smw/6/
The redirect isn't working in jsfiddle, but it should work for you.

if you want it to likley say: Click here to enter site:
<div>
Click here to enter my site!
</div>