Improve Nested Conditionals

by KomathiKarunakaran

HTML

<select id="color" onchange="callthis()">
<option value="0">Select</option>
  <option value="orange">Orange</option>
  <option value="red">Red</option>
  <option value="blue">Blue</option>
  <option value="green">Green</option>
  <option value="yellow">Yellow</option>
</select>
<p id="fontColor">Test</p>
<script>
	function callthis() {
  var color = document.getElementById('color').value
  var colorObj = {
  'orange': printOrangeBackground,
  'red': printRedBackground,
  'blue': printBlueBackground,
  'green': printGreenBackground,
  'yellow': printYellowBackground
};

  if (color in colorObj) {
    colorObj[color]();
  } else {
    document.getElementById('fontColor').style.color = ""	
  }
}

function printOrangeBackground () {
	document.getElementById('fontColor').style.color = "orange"	
}
function printRedBackground () {
	document.getElementById('fontColor').style.color = "red"	
}
function printBlueBackground () {
	document.getElementById('fontColor').style.color = "blue"	
}
function printGreenBackground () {
	document.getElementById('fontColor').style.color = "green"	
}
function printYellowBackground () {
document.getElementById('fontColor').style.color = "yellow"	
}

</script>