JSFiddle - React, Tailwind, and code Playground

by Gwyn Milcote

HTML

Female: <select id='female' name='female' onchange='femaleSprite()'>
<option id='none' value='none'>None Selected
</option>
<option id='3' value='3'>Altura
</option>
<option id='23' value='23'>Dawn
</option>
<option id='186' value='186'>Flying Chance
</option>
<option id='19' value='19'>Aladaf
</option>
<option id='204' value='204'>Gloomdust
</option>
</select>
<p>
<img src='http://griffusion.elementfx.com/griffsprite/14' id='fsprite' width='240' height='170' style='border:1px solid red;'>

</p>
Male: <select id='male' name='male' onchange='maleSprite()'>
<option id='none' value='none'>None Selected
</option>
<option id='22' value='22'>Six Wing
</option>
<option id='187' value='187'>Earth
</option>
<option id='15' value='15'>Tricky
</option>
<option id='209' value='209'>Falcon
</option>
</select>
<p>
<img src='http://griffusion.elementfx.com/griffsprite/206' id='msprite' width='240' height='170' style='border:1px solid red;'>
</p>
Need to get the griffin's number (dropdown id/value) and add it at the end of image URL. Script will access our database and generate the correct griffin's coat. 
<p>
One problem is that the page code, including these lists, are generated with PHP, and there's no way to add the onchange part, only set the name/id. It's also not possible to add "griffsprite/" before the values (that's all we need for the URL). I can't get the coder to change it :s So this demo is just theoretical. Trying to spot the mistake...
</p>
Jquery might be better. It only needs the dropdown's id, right? I'm just not sure how to add the resulting variable to the end of the image's src.

JavaScript

function femaleSprite() {
  var griffID = document.getElementById("female").value;
  document.getElementById("fsprite").src = "http://griffusion.elementfx.com/griffsprite/" + griffID ;
}

function maleSprite() {
  var griffID = document.getElementById("male").value;
  document.getElementById("msprite").src = "http://griffusion.elementfx.com/griffsprite/" + griffID ;
}