Once the page has loaded, the label color (which reads "enter your name") is supposed to change to red. However, despite the script being in place, the color remains unchanged. What could be the reason for this?
SCRIPT
window.onload = initiateScript;
function initiateScript() {
if( document.getElementById("text_field").value === "me") {
var allTags = document.getElementsByTagName("label");
allTags.className = "changer";
}
}
HTML
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="changer.js">
</script>
<style type="text/css">
@import url("changer.css");
</style>
</head>
<body bgcolor="#99FFFF">
<form>
<label>Enter your name<input type="text" id="text_field" value="me" />
</label>
</form>
</body>
</html>
CSS
@charset "utf-8";
/* CSS Document */
.changer {
color:#F00;
}
Even though the value is set as me, and the class name "changer" should dynamically apply to the label element causing it to appear red, why does this not work?