Use JavaScript to dynamically change an image in HTML when a var updates


I know this is a simple question but I am missing something. I am trying to update an image on a web page when a variable updates. I have tried several things and nothing is working. Here is what I have currently:

var sup_fan_state = 1;

function sup_fan_1(sup_fan_status) {
  if (sup_fan_state === 0) {
    document.getElementById('sup_fan_status').src = "images/fan00_250_gray_grad.png";
  } else if (sup_fan_state === 1) {
    document.getElementById('sup_fan_status').src = "images/sup_fan.gif";
  } else {
    window.alert("Something went terribly wrong!");
  }
}
<img src="images/blank.png" alt="supply fan" id="sup_fan_status" name="sup_fan_status">

Any help would be greatly appreciated.


Answers:


var statuses = {
	'0' : 'http://piq.codeus.net/static/media/userpics/piq_66072_400x400.png',
	'1' : 'http://piq.codeus.net/static/media/userpics/piq_62417_400x400.png',
	'' : 'http://piq.codeus.net/static/media/userpics/piq_65453_400x400.png'
};

function changeFanStatus() {
	var status = document.getElementsByTagName('form')[0]['fanState'].value;
	if (!statuses[status]) {
		return alert("Something went terribly wrong!");
	}
	document.getElementById('sup_fan_status').src = statuses[status];
}
<form>
	<input type="radio" name="fanState" value="0" onclick="changeFanStatus()" />0N
	<br />
	<input type="radio" name="fanState" value="1" onclick="changeFanStatus()" />OFF
	<br />
	<input type="radio" name="fanState" value="" onclick="changeFanStatus()" /> Other
	<br />
	<input type="radio" name="fanState" value="undefined" onclick="changeFanStatus()" /> undefined
</form>
<img src="" alt="supply fan" id="sup_fan_status" name="sup_fan_status" />