Incorporating JS in Html page

Question

I want to make a submit button that only activates when a radio button is checked, it works perfectly in JS fiddle http://jsfiddle.net/sYNj7/94/

var checker = document.getElementById('checkme');
 var sendbtn = document.getElementById('sendNewSms');
 // when unchecked or checked, run the function
 checker.onchange = function(){
if(this.checked){
    sendbtn.disabled = false;
} else {
    sendbtn.disabled = true;
}

}
<input type="checkbox" id="checkme"/>
  <input type="submit" name="sendNewSms" class="inputButton" disabled="disabled" id="sendNewSms" value=" Send " />

but it doesn't work when I try to make it into a html page with notepad++. I get the radio button next to a disabled submit button but the submit button doesn't activate when the radio button is checked. this is the code I have at the moment.https://gist.github.com/anonymous/e5f19f5745396926ce02

Alex K. · Accepted Answer · 2015-11-18 11:33:35Z

5

Currently you attempt to access HTML elements before the page is fully loaded; they are not available at that point.

1. Put your code in a named function

function myFunc() {
    var checker = document.getElementById('checkme');
    var sendbtn = document.getElementById('sendNewSms');
    // when unchecked or checked, run the function
....

2. Use the body onload event to ensure it runs when all the HTML elements are available for use:

<body onload="myFunc();">

(JSFiddle does this for you by default)

answered Nov 18, 2015 at 11:33

Alex K.

177k32 gold badges276 silver badges299 bronze badges

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

1 Comment

Emirhan Bayrak Over a year ago

Oh wow thanks very much for the fast reply, it does work now!

Amel · Accepted Answer · 2015-11-18 11:45:00Z

3

Just put your script just before closing body tag:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Captive portal</title>

</head>
<body>

<input type="checkbox" id="checkme"/>
  <input type="submit" name="sendNewSms" class="inputButton" disabled="disabled" id="sendNewSms" value=" Send " />
 <script>
     var checker = document.getElementById('checkme');
     var sendbtn = document.getElementById('sendNewSms');
     // when unchecked or checked, run the function
     checker.onchange = function(){
         if(this.checked){
             sendbtn.disabled = false;
         } else {
             sendbtn.disabled = true;
         }
     }
  </script>
</body>
</html>

edited Nov 18, 2015 at 11:45

answered Nov 18, 2015 at 11:36

Amel

7086 silver badges17 bronze badges

2 Comments

user663031 Over a year ago

Putting the script after the body might work, but it's not valid HTML.

Amel Over a year ago

Yeah, it's better to put it just before closing body tag. Thanks.

Buzinas · Accepted Answer · 2015-11-18 11:34:59Z

2

It happens because you're trying to get the elements before they are rendered in the page.

In jsFiddle, it works, because they wrap your code into a onload event, and then, all the elements are already rendered when you try to use them.

There are two simpler ways of achieving what you want:

You can put your script tag right before ending the body tag, e.g:

 <!DOCTYPE html>
 <html>
 <head>
 </head>
 <body>
   <!-- all your content -->
   <script>
   </script>
 </body>
 </html>

Or you can wrap your code in a onload or DOMContentLoaded event:

<script>
document.addEventListener('DOMContentLoaded', function(e) {
  // your code goes here
});
</script>

answered Nov 18, 2015 at 11:34

Buzinas

11.8k2 gold badges38 silver badges59 bronze badges

Collectives™ on Stack Overflow

Incorporating JS in Html page

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related