javascript checkbox basic
I'm simply trying to get an alert that is the result of checking a box. I can't seem to isolate the check-event. it fires when I load the page eventhough I try to set the check property to false initially.
Looking it up got me to jquery and all that stuff but for my formal training in javascript I need to stick to javascript and get this down first (jquery wil be my next course).
here's the code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>JavaScript Challenges</title>
<script type="text/javascript">
window.onload = function(){
checkbox = document.getElementById("subscribe");
checkbox.checked = false;
if (checkbox.checked = true){
alert("checked works");
}
}
</script>
</head>
<body>
<form action="">
<fieldset>
<legend>Email subscriptions</legend>
<p id="subscribepara">
<label>
<input type="checkbox" name="subscribe" id="subscribe">
Yes! I would like to receive the occasional newsletter via email.
</label>
</p>
<p id="emailpara">
<label>
Email Address:
<input type="text" name="email" id="email">
</label>
&l开发者_JS百科t;/p>
</fieldset>
</form>
</body>
</html>
it's a javascript challenge from wikiversity btw. second part of the first challenge. first part where you need Hiding the email element with style.display ='none' worked fine.
It looks like it's firing because the comparison operator is broken:
if (checkbox.checked = true)
should be
if (checkbox.checked == true)
The version you have is essentially setting the checked state to true. This operation is successful, and therefore itself resolves to true (resulting in entering the conditional and seeing the alert).
Additionally, this code isn't going to fire when you manually check/uncheck the checkbox. This is running only once, when the page loads. One way to bind to the click event is to specify a function call in the markup for the checkbox.
It's considered better design not to do it in markup, but rather to separate the code and bind to events externally. But you'll get into that when you get into jQuery. Starting with the basics is fine.
If you want an event to trigger after checking the checkbox, you should not bind it to window.onload, but the onchange event of the checkbox:
<script>
var checkbox = document.getElementById('subscribe');
checkbox.onchange = function() {
if (checkbox.checked = true){
alert("checked works");
}
}
</script>
Please note that the onchange event does not work the same way for Internet Explorer as other browsers. This is a different topic altogether, so if you want more info on that, take a look at this question.
Also note that the function above should be defined below the actual input element. If you include this sample in the <head>, it does not yet know of the existance of an element with the id subscribe and the JavaScript will fail. A better, more flexible alternative is to bind the event handlers after the DOM loads, but for the sake of brevity, I advise you to search SO or Google on this subject if you want more info :)
I think your approach is slightly off - importantly, you're not actually catching/handling events at all right now. Currently, when the page loads you look at the checkbox's checked state, possibly launching the alert. My understanding of the requirement is that you pop up an alert when the checkbox is changed to checked.
(And as David has pointed out, you're actually checking the tickbox inadvertently when you perform the check.)
What you want to do instead is register a listener for the checkbox's onchange event, which will execute some code every time the checkbox changes. Since it sounds like you want to learn this, I'll leave it there rather than giving some exact code. Take a look at this introduction to event handlers if you want some deeper reading about the what and the how (note that it's much more involved that you need for this particular case).
In order for a function to be invoked by the action of checking a checkbox, you need to add an event listener to the checkbox. Here's how to do it:
// you have to do it inside the window.onload function so you know the DOM is available
window.onload = function(){
var checkbox = document.getElementById("subscribe");
checkbox.onchange = function(){
if(checkbox.checked == true){
alert('checked!');
}
};
};
The "onchange" property is set to a function that will be called everytime the checkbox is changes state from checked to unchecked and vica versa. Inside that function, we check the value of checked and launch the alert when appropriate.
Hope that helps!
Check your comparison, checkbox.checked = true is an assignment. Research the onClick event
Since this is essentially homework, I'm not posting working code. You're close, and after reading some more you'll get it.
You could use a function and trigger it via an onclick event. This way you could reuse it too on other checkboxes.
# js
function alert_on_checked(elementId) {
var checkbox = document.getElementById(elementId);
if(checkbox.checked) {
alert('checked works!');
}
}
# html
...
<input type="checkbox" name="subscribe" id="subscribe" onclick="alert_on_checked(this.id)" >
...
加载中,请稍侯......
精彩评论