2

I am a begginer at javascrit, and im trying to get a form result globaly

the radio button

<input type='radio' name='supporter' id='supporter' value='yes'>

and the javascript on the nother page

<script type="text/javascript">
function show(){
    var supporter = document.getElementById('supporter');
    if (supporter.value == "yes") {
        alert("it works")
    }
}

show();
</script>

and i keep getting an error, this: supporter is null

can please someone tell me what im missing?

Side
  • 1,753
  • 9
  • 35
  • 64
  • Is this javascript on a different page from the radio button? Because that won't work. – Ariel Aug 01 '11 at 08:27
  • i have not any problem with your javascript http://jsfiddle.net/Awea/Y5hNw/ just a missed semicolon :p – Awea Aug 01 '11 at 08:28
  • @Awea, still works even without semicolon – kazinix Aug 01 '11 at 08:47
  • @domanokz, i know http://net.tutsplus.com/tutorials/javascript-ajax/the-10-javascript-mistakes-youre-making/?utm_source=feedburner&utm_medium=feed&utm_campaign=Feed%3A+nettuts+%28Nettuts%2B%29 a good article – Awea Aug 01 '11 at 08:50
  • @Awea What I meant is its still working, I didn't say its a good practice, me either use semicolon. And, I didn't mean to offend or something. :) – kazinix Aug 01 '11 at 08:54
  • @domanokz don't worry i didn't take it for offense, my english is just no so good :p – Awea Aug 01 '11 at 09:06

3 Answers3

7

It will depend on when the script is executed. Javascript is executed by the browser as it is encountered, which means that if your snippet of code exists in the page before the HTML element, then at that point in time, the HTML element does not yet exist.

One solution would be to put the Javascript at the very end of the page, or move that code into the document.onload handler.

document.onload = function () {
    show();
};
nickf
  • 537,072
  • 198
  • 649
  • 721
  • Never put script elements in the body element, it encourages poor programming habits and leads to a complete lack of organization code-wise. If you don't have the time to do it the right way then don't do it at all. – John Sep 18 '14 at 15:46
3

You are likely running that script before the <input> element is reached in your code, so it doesn't exist when you try to access it. Make sure that your script comes after your input (or you wrap your script in a document onload event handler so that it doesn't execute until the page has fully loaded)

Paul
  • 139,544
  • 27
  • 275
  • 264
3

Put this after or below input element. The input element wasn't loaded yet and the javascript is executed so you get null.

Solution 1:

<html>
<head></head>
    <body>
    <input id="supporter" value="yes" />
    <script type="text/javascript">
    function show()
    {
        var supporter = document.getElementById('supporter');
     if (supporter.value == "yes") 
         {
          alert("it works")
         }
    }

    show();
    </script>
    </body>
</html>

Solution 2:

Or if you preffer putting scripts in the head of html, run the function only when the page is loaded.

<html>
<head>
    <script type="text/javascript" src="yourcodes.js">
    </script>    
</head>
<body>
    <input id="supporter" value="yes" />
</body>
</html>

On your separate javascript page:

function show()
{
    var supporter = document.getElementById('supporter');
     if (supporter.value == "yes") 
     {
       alert("it works");
     }
}

//When page loaded
document.onload = function(){
    show();
};

Note: you don't have to put <script></script> in your JavaScript file.

kazinix
  • 28,987
  • 33
  • 107
  • 157