Html - changing the src of an image using select box options and via javascript

fedora
July 11, 2023
347 views
2 votes
3 Answers

Its been a while that I’m trying to change the src of my image using JavaScript addEventListener. But it isn’t changing the src. The following example to explain my situation:

let bulbImage = $.querySelector(".bulb-image");

let turnOnOption = $.querySelector(".bulb-on");
let trunOffOption = $.querySelector(".bulb-off");

turnOnOption.addEventListener("click" , turnOnFunction);

function turnOnFunction () {
    bulbImage.setAttribute("src" , "./images/bulbon.gif");
}

trunOffOption.addEventListener("click" , turnOffFunction);

function turnOffFunction () {
    bulbImage.setAttribute("src" , "./images/bulboff.gif");
}

For the record in my mini project, I’m not using any framework and this is very simple and easy code so there is no bug.

the html code is :

<img src="./images/bulboff.gif" class="bulb-image" alt="bulboff">
<select class="selectbox">
  <option value="Turn ON" class="bulb-on">Turn ON</option>
  <option value="Turn OFF" class="bulb-off">Turn OFF</option>
</select>

Answers

you need to use change event and the select elements values

<img src="./images/bulboff.gif" class="bulb-image" alt="bulboff">
<select class="selectbox">
  <option value="Turn ON" >Turn ON</option>
  <option value="Turn OFF">Turn OFF</option>
</select>

const
  bulbImage  = document.querySelector('.bulb-image')
, turnOption =  document.querySelector('.selectbox')
  ;
turnOption.addEventListener( 'change', function()
  {
  if ( turnOption.value === 'Turn ON' ) bulbImage.src = './images/bulbon.gif';
  if ( turnOption.value === 'Turn OFF' ) bulbImage.src = './images/bulboff.gif';
  })

You can also use a JS object:

const
  bulbImage  = document.querySelector('#bulb-image')
, turnOption = document.querySelector('#select_id')
, imgSrc =
  { 'Turn ON'  : 'https://picsum.photos/id/1/200'
  , 'Turn OFF' : 'https://picsum.photos/id/2/200'
  }
  ;
turnOption.onchange = e =>
  {
  bulbImage.src = imgSrc[ turnOption.value ];
  }

select {
  border  : none;
  margin  : 1em 0;
  padding : .4em;
  cursor  : pointer;
  }
img {
  display : block;
  }

<select class="selectbox" id="select_id">
  <option value="Turn ON"  selected > Turn ON  </option>
  <option value="Turn OFF"          > Turn OFF </option>
</select>
<img src="https://picsum.photos/id/1/200" id="bulb-image" alt="bulbOnOff">

function changeImg() {
  if (document.getElementById("select_id").value === 'Turn ON') {
    document.getElementsByClassName("bulb-image")[0].src = "https://picsum.photos/id/1/200/300";
  } else {
    document.getElementsByClassName("bulb-image")[0].src = "https://picsum.photos/id/2/200/300";
  }
}

select {
  border: none;
  margin: 20px 0;
  padding: 10px;
  cursor: pointer;
}

img {
  display: block
}

<select class="selectbox" onchange="changeImg()" id="select_id">
  <option value="Turn ON" class="bulb-on">Turn ON</option>
  <option value="Turn OFF" class="bulb-off">Turn OFF</option>
</select>
<img src="https://picsum.photos/id/1/200/300" class="bulb-image" alt="bulboff">

<button onclick="document.getElementById('myImage').src='pic_bulbon.gif'">Turn on the light</button>

<img id="myImage" src="pic_bulboff.gif" style="width:100px">

<button onclick="document.getElementById('myImage').src='pic_bulboff.gif'">Turn off the light</button>

Please signup or login to give your own answer.

Click here to cancel reply.

Html – changing the src of an image using select box options and via javascript

Answers