JSFiddle - React, Tailwind, and code Playground

by magizter

HTML

<img id="#AvatarImage" name="#AvatarImage" src="DefaultAvatar.JPEG" style="widht:200px;height:200px;"/>
<select onChange="switchImage(this.options[this.selectedIndex].value);">
  <option value="-1" selected="1">Default image</option>
  <option value="0">image #1</option>
  <option value="1">image #2</option>
  <option value="2">image #3</option>
  <option value="3">image #4</option>
  <option value="4">image #5</option>
  <option value="5">image #6</option>
  <option value="6">image #7</option>
</select>

JavaScript

/* URL of folder with images  */
var baseURL_OF_images = "./";
/* array of default image files */
var images =
      [ "image 1.jpeg", "image 2.jpeg",
        "image 3.jpeg", "image 4.jpeg",
        "image 5.jpeg", "image 6.jpeg",
        "image 7.jpeg" ]
function switchImage(imgNum){
  var x = parseInt(imgNum);
  var src = baseURL_OF_images
                + ( ( x < 0 ) ? "DefaultAvatar.JPEG": images[x] );
  document.getElementById("#AvatarImage").src = src;
  return true;
}