RBG Slider Help-sliders not changing background color

JavaScript
1
Background Color Sliders body{ font-family: verdana; background-color: #000000; 
	}

	h1{


		color: #112;
		text-align: center
		text-transform: uppercase;
		text-shadow: 1px 1px #000, -1px -1px #CCC;
		font-size: 400%
	}
	
	label, input{
		display: block;
		width: 100px;
		color: #D3D3D3;
	
	
	
	
	</style>
<script>
function changeBackground(){

//Get slider color variables

	var rd = parseInt(document.getElementByID('red').value);
	var gr = parseInt(document.getElementByID('green').value);
	var bl = parseInt(document.getElementByID('blue').value);

//convert to hex
	var rdhexCode = (rd < 16) ? "0" + rd.toString(16) : rd.toString(16);
	var grhexCode = (gr < 16) ? "0" + gr.toString(16) : gr.toString(16);
	var blhexCode = (bl < 16) ? "0" + bl.toString(16) : bl.toString(16);

	var hexcode = "#" + rdhexCode + grhexCode + blhexCode;

//change the background color
	document.body.style.backgroundColor = hexcode;


}

</script>

<body>
	<h1>Background Color Sliders</h1>


	<form>
	
	
	
		<label for = "red">RED</label>
			<input type = "range" min="0" max="255" step="1" 
			value = "0" id = "red" name = "red"
			onchange = "changeBackground()">

		<label for = "green">GREEN</label>
			<input type = "range" min="0" max="255" step="1" 
			value = "0" id = "green" name = "green"
			onchange ="changeBackground()">

		<label for = "blue">BLUE</label>
			<input type = "range" min="0" max="255" step="1" 
			value = "0" id = "blue" name = "blue"
			onchange ="changeBackground()">



	</form>


</body>
2

You have document.getElementByID in your javascript instead of document.getElementById (lowercase d)