The Goal:
A button which displays an alert with \”Hello world!\” and some radio buttons which display a warning when the third one is selected.
The HTML:
<!DOCTYPE html>
<html lang=\"en-US\">
<head>
<meta charset=\"utf-8\">
<title>hello world</title>
<link rel=\"stylesheet\" href=\"style.css\">
<meta name=\"description\" content=\"\">
</head>
<body>
<div id=\"main\">
<p>text</p>
<a href=\"#\">link</a>
<button>button</button>
<form>
<fieldset>
<legend>Legend</legend>
<label for=\"radio1\">Option 1</label>
<input type=\"radio\" name=\"radio-buttons\" value=\"option-1\" id=\"radio1\"/>
<label for=\"radio2\">Option 2</label>
<input type=\"radio\" name=\"radio-buttons\" value=\"option-2\" id=\"radio2\"/>
<label for=\"radio3\">Option 3</label>
<input type=\"radio\" name=\"radio-buttons\" value=\"option-3\" id=\"radio3\"/>
<p id=\"warn\">No, pick another one.</p>
</fieldset>
</form>
</div>
<script type=\"text/javascript\" src=\"script.js\"></script>
</body>
</html>
The CSS:
Most of this really doesn\’t matter. The important thing is #warn which is supposed to only show when the third option is selected.
a,
button {
display: block;
margin-bottom: 1em;
}
fieldset {
width: 245px;
height: 75px;
background: #dfe;
position: relative;
}
legend {
background: white;
}
#warn {
display: none;
background: #d33;
color: #fff;
font-family: helvetica;
padding: 10px 15px 10px;
margin: 0 -12px;
position: absolute;
top: 52px;
width: 239px;
}
The JavaScript:
I think the problem is in my event handlers, but I don\’t know for sure. BTW yes I know there\’s some extraneous stuff here; like I said I\’m just screwing around.
// variables
var p = document.getElementsByTagName(\"p\");
var a = document.getElementsByTagName(\"a\");
var button = document.getElementsByTagName(\"button\");
var fieldset = document.getElementsByTagName(\"fieldset\");
var radio1 = document.getElementById(\"radio1\");
var radio2 = document.getElementById(\"radio2\");
var radio3 = document.getElementById(\"radio3\");
var warn = document.getElementById(\"warn\");
// functions
function prepareEventHandlers() {
button.onclick = function() {
alert(\"Hello world!\")
};
radio3.onfocus = function() {
warn.setAttribute(\"display\",\"inherit\")
}
}
// window onload
window.onload = function() {
prepareEventHandlers();
}
Rating:
The post Trying to learn JavaScript and nothing is working on my page appeared first on Javascript ASK.
via Javascript ASK http://javascriptask.phpfogapp.com/trying-to-learn-javascript-and-nothing-is-working-on-my-page.html
No comments:
Post a Comment