JS: Object is not defined

Question

I'm would like to create an object in javascript which prints the number entred but I get this error.

Déclaration d'objet.html:30

Code :

  <script type="text/javascript">
  // <!--
    function Init()

        {
            var test= new Object;
            test.affiche= function()
            {
                var champ=Number(document.getElementById("champSaisie").value);
                alert(Number(champ+4));
            };
        }
  </script>
</head>
<body onload="Init()">

<p><label for="champSaisie">Saisissez un nombre&nbsp;: </label><input type="text" id="champSaisie"></p>
<p><input type="submit" onclick="test.affiche()" value="Effectuer le calcul"></p>



</body></html>

score 3 · Answer 1 · answered May 26 '16 at 13:47

3

The variable that you are creating, test is local to your Init function.

When you try to access test in your onclick handler, it is looking for test at the global level, which doesn't exist.

I've updated your code to use addEventListener instead.

function Init() {
  var test = {};
  test.affiche = function() {
    var champ = Number(document.getElementById("champSaisie").value);
    alert(Number(champ + 4));
  };
  document.getElementById("calc").addEventListener("click", test.affiche);
}

Init();

<p>
  <label for="champSaisie">Saisissez un nombre&nbsp;:</label>
  <input type="text" id="champSaisie">
</p>
<p>
  <input id="calc" type="submit" value="Effectuer le calcul">
</p>

answered May 26 '16 at 13:47

Jeremy J Starcher

23,369
6
54
74

Thank you , but no way to keep my code ? because in body I load the function Init so it should find it no ? – unfoudev May 26 '16 at 13:52
using inline event handlers `(onclick="blah()")` is considered bad practice by many. You can't dynamically add or remove them.. you separate your code into two places (the code and the HTML it gets called from). If you really want to keep the inline handlers then you have to move things to the global scope. – Jeremy J Starcher May 26 '16 at 13:54
`Déclaration d'objet.html:15 Uncaught TypeError: Cannot read property 'addEventListener' of null` I get this error now – unfoudev May 26 '16 at 14:06
I added the `id="calc"` when I made the fiddle. Sorry, I should have pointed that out. And if your page suddenly reloads after you display the message it is because you are actually submitting the `form` and you sould change your `` to `` – Jeremy J Starcher May 26 '16 at 14:10

score 2 · Answer 2 · edited May 23 '17 at 12:24

test is local to the function Init. You cannot access it in the event handler (onclick="test.affiche()") because it is not global.

In this example there is no reason to put the code inside Init at all, you can just directly put

var test= new Object;
test.affiche= function()
{
  var champ=Number(document.getElementById("champSaisie").value);
  alert(Number(champ+4));
};

into the <script>. This would make test global. There is no benefit in waiting for the page to load before creating the object.

You could also create a global variable from inside Init.

However, the better solution would probably be to avoid globals and bind the event handler inside Init instead of using inline event handlers.

Related: What is the scope of variables in JavaScript?

JS: Object is not defined

2 Answers2