CODEWITHSUNDEEP
javascripthtml
JosephG
JosephG

Reputation: 3253

change javascript variables through html images

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?

Upvotes: 0

Views: 184

Answers (5)

Drew
Drew

Reputation: 17

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>

Upvotes: 1

user1996720
user1996720

Reputation: 1

$('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

Upvotes: 0

user1999047
user1999047

Reputation:

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;
    }

Upvotes: -1

Austin Brunkhorst
Austin Brunkhorst

Reputation: 21130

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);
}

Upvotes: 2

SHANK
SHANK

Reputation: 2958

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.

Upvotes: 1

Related Questions