[Solved] Is it possible to change only the picture? [closed]


Weave: http://kodeweave.sourceforge.net/editor/#b49e1b998a030e3dc8084c2771498a38

You can do this a few ways either using an if else statement or a ternary operator.

var changeIMG = document.querySelector(".changeIMG")
var oldSrc="http://i.telegraph.co.uk/multimedia/archive/02223/bear-cub-toy_2223075k.jpg"
var newSrc="http://image.mlive.com/home/mlive-media/width960/img/grandrapidspress/photo/2015/03/20/-6328b3da95a15820.JPG"

function changeSrc() {
  var imgElement = document.querySelector(".bears")
  var src = imgElement.src

  imgElement.src = src === oldSrc ? newSrc : oldSrc
}

changeIMG.onclick = function() {
  changeSrc()
}
changeSrc()
body {
  padding: 1em;
  text-align: center;
}

.changeIMG {
  display: block;
}
.bears {
  display: block;
  width: 52%;
  margin: 1.1em auto 0 auto;
}
<link rel="stylesheet" href="http://getbootstrap.com/dist/css/bootstrap.css"/>
<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://getbootstrap.com/dist/js/bootstrap.js"></script>

<button type="button" class="btn changeIMG btn-primary">
  Change Source
</button>

<img class="bears">

1

solved Is it possible to change only the picture? [closed]