JSFiddle - React, Tailwind, and code Playground

by Gwyn Milcote

HTML

<select id="ultra" onchange="displayImage()">
<option value="https://a.deviantart.net/avatars/k/a/kaybutts.gif">Fire 1</option>
<option value="https://a.deviantart.net/avatars/s/t/strawberry-loupa.gif">Fire 2</option>
<option value="https://a.deviantart.net/avatars/a/v/avicuiae.png">Fire 3</option>
<option value="https://a.deviantart.net/avatars/c/a/caninelion.jpg">Fire 4</option>
</select><br> <img id="canvas" src="https://a.deviantart.net/avatars/b/r/bronzehalo.gif" />
<p>
<select id="super" onchange="displayImage2()">
<option value="https://a.deviantart.net/avatars/f/l/flubberwurm.png">Fire y</option>
<option value="https://a.deviantart.net/avatars/v/e/verridith.png">Fire g</option>
<option value="https://a.deviantart.net/avatars/d/r/dreamingofdarkhorses.jpg">Fire f</option>
<option value="https://a.deviantart.net/avatars/s/p/spitfiresonice.png">Fire d</option>
</select><br> <img id="canvas2" src="https://a.deviantart.net/avatars/j/a/jakeukalane.png" />
<p>
<select id="mega" onchange="displayImage3()">
<option value="https://a.deviantart.net/avatars/r/i/ride4life-stables.png">Fire y</option>
<option value="https://a.deviantart.net/avatars/s/i/silvershadow17464.png">Fire g</option>
<option value="https://a.deviantart.net/avatars/p/o/poisonsoldat.gif">Fire f</option>
<option value="https://a.deviantart.net/avatars/v/i/viviwonda.gif">Fire d</option>
</select><br> <img id="canvas3" src="https://a.deviantart.net/avatars/t/h/thems0kitty.png" />

JavaScript

function displayImage() {
    var image = document.getElementById("canvas"),
        select = document.getElementById('ultra');
    image.src = select.value;
    console.log('set src to ' + select.value);
}

function displayImage2() {
    var image = document.getElementById("canvas2"),
        select = document.getElementById('super');
    image.src = select.value;
    console.log('set src to ' + select.value);
}

function displayImage3() {
    var image = document.getElementById("canvas3"),
        select = document.getElementById('mega');
    image.src = select.value;
    console.log('set src to ' + select.value);
}