CODEWITHSUNDEEP
javascripthtml
el323
el323

Reputation: 2920

Change Image on div onclick()

I want to load different image on different div clicks. How do I know which div is clicked? Do I have to pass the div class as argument?

    <script type="javascript">
    function ChangeLibaas() {

        
    }
    </script>
    <div class="Indeximages">
        <img src="images/white.png" id="libaasImage" class="img-responsive jubbahImage" alt="" />
    </div>

    <div class="col-md-12  nopadding customTabs">
        <h2>Pick a Colour</h2>
        <div class="col-md-3 colourBlue" onclick="ChangeLibaas()"></div>
        <div class="col-md-3 colourBlack" onclick="ChangeLibaas()"></div>
        <div class="col-md-3 colourGreen" onclick="ChangeLibaas()"></div>
    </div>

Upvotes: 0

Views: 1224

Answers (3)

Holanda Junior
Holanda Junior

Reputation: 56

I hope it can be useful:

In your html

<div class="Indeximages">
    <img src="images/white.png" id="libaasImage" class="img-responsive jubbahImage" alt="" />
</div>

<div class="col-md-12  nopadding customTabs">
    <h2>Pick a Colour</h2>
    <button class="col-md-3" data-color="colourBlue" onclick="ChangeLibaas(this)">Blue</div>
    <button class="col-md-3" data-color="colourBlack" onclick="ChangeLibaas(this)">Black</div>
    <button class="col-md-3" data-color="colorGreen" onclick="ChangeLibaas(this)">Green</div>
</div>

In javascript, code looks like:

function ChangeLibaas(origin) {
    var color = origin.dataset.color;
    var img = document.getElementById('libaasImage');
    img.src = color + ".jpg";
}

Upvotes: 0

mplungjan
mplungjan

Reputation: 178421

Simplest inline: pass (this): 

<div class="col-md-3 colourBlue" onclick="ChangeLibaas(this)"></div>

and use it : 

function ChangeLibaas(theClickedDiv) { 
   var img = "images/"+
     theClickedDiv.className.split("colour")[1].toLowerCase()+".png"; // take the colour
   document.getElementById("libaasImage").src=img;
}

To make it all neater, use an attribute and unobtrusive code

window.onload=function() {
  var divs = document.querySelectorAll("div.col-md-3");
  for (var i=0;i<divs.length;i++) {
    divs[i].onclick=function() {
      document.getElementById("libaasImage").src="images/"+
        this.getAttribute("data-color")+".png";
    }
  }
}

using

<div class="col-md-3 colourBlue" data-color="blue""></div>

Upvotes: 3

Phiter
Phiter

Reputation: 14977

You can pass as an argument, like this:

<div class="col-md-12  nopadding customTabs">
    <h2>Pick a Colour</h2>
    <div class="col-md-3 colourBlue" onclick="ChangeLibaas(this)"></div>
    <div class="col-md-3 colourBlack" onclick="ChangeLibaas(this)"></div>
    <div class="col-md-3 colourGreen" onclick="ChangeLibaas(this)"></div>
</div>

And then:

<script type="javascript">
function ChangeLibaas(sender) {
    var div = sender;
}
</script>

But it's better if you use event listeners.

Upvotes: 1

Related Questions