onclick function, if checkbox is checked event

Question

tried couple of things and was not successful. What am I missing here? I just want to do a simple alert or log, and I am not able to. Here is what I have:

function toggleEmail() {
   var isChecked = document.getElementById("subscribe");
    if (isChecked.checked) {
    console.log('Yep, my function is being called');
}

}

toggleEmail();

    <title>JavaScript Challenges</title>
  </head>
  <body>
    <form action="">
      <fieldset>

        <legend>Email subscriptions</legend>

        <p id="subscribe">
          <label>
            <input type="checkbox" name="subscribe" id="subscribe" onclick="toggleEmail()" />
            Yes! I would like to receive all of your free candy!
          </label>
        </p>

        <p id="emailpara">
          <label>

You've a scope issue, your correctly initialized fiddle works fine. (Not "onLoad", "No wrap - in <head>" instead.) — Teemu
– Teemu, Commented Aug 25, 2015 at 18:56

score 1 · Accepted Answer · 2015-08-28 21:41:41Z

1

In JSFiddle, HTML on the left top side, is already the <body> section. Your function is working. The only thing, you have to change is on the left side No wrap - in <head>. That means that JavaScript is running in the <head>.

<head>
    <script>JavaScript</script>
</head>
<body>
    HTML
</body>

Or No wrap - in <body> is also working. That means that JavaScript is running after HTML in the <body> section.

<head>
<head>
<body>
    HTML
    <script>JavaScript</script>
<body>

Example

edited Aug 28, 2015 at 21:41

answered Aug 25, 2015 at 19:41

user3589620

Sign up to request clarification or add additional context in comments.

Comments

Jack A. · Accepted Answer · 2015-08-25 19:42:43Z

1

The problem with the fiddle you gave in your comment ( http://jsfiddle.net/Lucky500/j0vfzrwy/28/ ) is that the toggleEmail function is being created in the onLoad event handler for the page and is part of that scope, instead of being part of the global scope.

When you use direct binding in the HTML markup like this:

<input type="checkbox" name="subscribe" id="subscribe" onclick="toggleEmail()" />

Then your function must be in the global scope.

If you just change your fiddle to use "No wrap - in <head>" it works because the function is created in the global scope. Like this: http://jsfiddle.net/j0vfzrwy/32/.

answered Aug 25, 2015 at 19:42

Jack A.

4,5631 gold badge28 silver badges38 bronze badges

Comments

Imran · Accepted Answer · 2015-08-25 18:51:11Z

0

Try by changing this line:

<input type="checkbox" name="subscribe" id="subscribe" onclick="toggleEmail()" />

To

<input type="checkbox" name="subscribe" id="subscribe" onchange="toggleEmail()" />

answered Aug 25, 2015 at 18:51

Imran

4,7802 gold badges23 silver badges40 bronze badges

2 Comments

Lucky500 Over a year ago

Hey Guys, I did changed to onchange, but I keep getting the error that toogleEmail is not defined.

Imran Over a year ago

Where have you add the javascript in your html? If you have written you js in an external file then you have to link it in html. Beside put your script link at the end of the body of your html. It should work properly. Best of luck.

Collectives™ on Stack Overflow

onclick function, if checkbox is checked event

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related