Save DOM element for later use

Question

I have an

input type="button"

element in my HTML code. I to call the "onclick" method on that button, but I get the following error

Uncaught TypeError: Cannot set property 'onclick' of null

which I think says that the variable button is null, so I can't call the "onclick" method on something which is null. I don't know why this is null.

alert("Bine ati venit!");

var button = document.getElementById("buton");

button.onclick = function(){

 var luna = document.getElementsByName("luna")[0].value;
 var zi = document.getElementsByName("zi")[0].value;
 var zodie;
 
 if((luna == 1 && zi <= 20) || (luna == 12 && zi >= 22)){
  document.getElementsByName("zodie")[0].value = "Capricorn"
 }else if((luna == 1 && zi >= 21) || (luna == 2 && zi <= 18)){
  document.getElementsByName("zodie")[0].value = "Varsator";
 }else if((luna == 2 && zi >= 19) || (luna == 3 && zi <= 20)){
  document.getElementsByName("zodie")[0].value = "Pesti";
 }else if((luna == 3 && zi >= 21) || (luna == 4 && zi <= 20)){
  document.getElementsByName("zodie")[0].value = "Berbec";
 }else if((luna == 4 && zi >= 21) || (luna == 5 && zi <= 21)){
  document.getElementsByName("zodie")[0].value = "Taur";
 }else if((luna == 5 && zi >= 22) || (luna == 6 && zi <= 21)){
  document.getElementsByName("zodie")[0].value = "Gemeni";
 }else if((luna == 6 && zi >= 22) || (luna == 7 && zi <= 21)){
  document.getElementsByName("zodie")[0].value = "Rac";
 }else if((luna == 7 && zi >= 22) || (luna == 8 && zi <= 22)){
  document.getElementsByName("zodie")[0].value = "Leu";
 }else if((luna == 8 && zi >= 23) || (luna == 9 && zi <= 22)){
  document.getElementsByName("zodie")[0].value = "Fecioara";
 }else if((luna == 9 && zi >= 23) || (luna == 10 && zi <= 22)){
  document.getElementsByName("zodie")[0].value = "Balanta";
 }else if((luna == 10 && zi >= 23) || (luna == 11 && zi <= 21)){
  document.getElementsByName("zodie")[0].value = "Scorpion";
 }else if((luna == 11 && zi >= 22) || (luna == 12 && zi <= 21)){
  document.getElementsByName("zodie")[0].value = "Sagetator";
 }
};

window.onbeforeunload = function(){
 return "La revedere!";
};

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>Exercitiul 1</title>
  <link rel="stylesheet" type="text/css" href="css/normalize.css">
  <script src="scripts/script.js" type="text/javascript"></script>
 </head>
 
 <body>
  <form name="formular">
   <table>
    <tr>
     <td>Ziua</td>
     <td><input type="text" name="zi"></td>
    </tr>
    <tr>
     <td>Luna</td>
     <td><input type="text" name="luna"></td>
    </tr>
    <tr>
     <td></td>
     <td><input type="button" value="Determinare zodie" id="buton"></td>
    </tr>
    <tr>
     <td>Zodia</td>
     <td><input type="text" name="zodie"></td>
    </tr>
   </table>
  </form>
 </body>
</html>

Your script is running at the top of the page, which means the element doesn't yet exist. Move it down to the bottom, just before the `
` tag. — , Dec 06 '15 at 18:23

Lupus · Answer 1 · 2015-12-06T18:28:07.237

1

If id of your button is not button then you cannot get it with

document.getElementById("buton");

add an id to that button

<input type="button" id="my-button"/>

and then

var button = document.getElementById('my-button');

EDIT Ok then put your <script> at the end of your page's <body>.

edited Dec 06 '15 at 18:28

answered Dec 06 '15 at 18:24

Lupus

1,519
3
21
38

`` The ID is `buton` and that's what he's fetching. – Dec 06 '15 at 18:25
@squint check the edit – Lupus Dec 06 '15 at 18:29

Save DOM element for later use

1 Answers1