I have the following html code:
<div align="center">
<img src="blue.png"/>
<img src="cyan.png"/>
<img src="green.png"/>
<img src="purple.png"/>
<img src="red.png"/>
<img src="yellow.png"/>
<div\>
and I need to change a javascript variable depending on which one is clicked.
I need var color to equal "red" if red is clicked, "blue" if blue clicked, etc...
Is there any easy way of doing this?
Assuming that each image's src will be a color with just an extension you can do this.
var images = document.getElementsByTagName('img');
for(var i = 0; i < images.length; i++) {
images[i].onclick = onImageClick;
}
function onImageClick(e) {
var image = e.event.target || window.event.target;
var color = image.src.split('.')[0];
alert(color);
}
That isn't very dynamic so you should just use data attributes like this.
<img src="blue.png" data-color="blue" />
And onImageClick() will look like this.
function onImageClick(e) {
var image = e.event.target || window.event.target;
var color = image.getAttribute('data-color');
alert(color);
}
you can keep a color attribute with your image tags
<img src='my_image' my_color='blue' class='' onclick='myFunc(this)'>
then you can access it in the js by attaching an onclick function():
function myFunc(obj)
{
var color = obj.getAttribute('my_color');
}
Hope that helps.
With jQuery
<div align="center">
<img src="blue.png" data-color="blue" />
<img src="cyan.png" data-color="cyan" />
<img src="green.png" data-color="green" />
<img src="purple.png" data-color="purple" />
<img src="red.png" data-color="red" />
<img src="yellow.png" data-color="yellow" />
</div>
<script>
$('.color').click(function () {
var current_color = $(this).data('color');
});
</script>
$('img').click(function(){
var color = $(this).attr('src').split('.')[0];
alert(color);
});
The above code is to get the var color using the src of the img in jQuery
Have you learned jQuery?
You will need to link the jQuery library in your main html file in between the Head tags
http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js
jQuery allows you to select the class selector and apply the action you want to it.
You are asking to combine 2 actions. 1) Grab an element 2) Apply a click action to that element.
jQuery makes this easy.
jQuery's format is: $('element').effect();
So to answer your question: $('.over').click();
Note: It would be best to rename your class to associate the color with that .png image, so later on you would know which you were referring to. You have the classname 'over' repeated for several .png images. So the jQuery will select every element with the class 'over' and apply that action to it.
You can also now apply any function to that click event.
So for example:
var color = $('.blue').click(function(){
if(color === blue){
return blue;
}