-1

My question is why my element is returning a value of null even with a value preassigned in my input tag.

<input type="number" name="minute" id="minute" 
       maxlength="2" max="2" placeholder="00" value="00" required>

I am using this code in my JS file.

var min = document.getElementById("minute");

Edit: I'm sorry guys I accidentally deleted it copying the code over. To clarify this variable is at the very top of my file where I am just declaring variables for use.

Jack Bashford
  • 38,499
  • 10
  • 36
  • 67
A-Bro
  • 93
  • 8
  • 2
    where is the javascript being called? – Daniel A. White Mar 13 '19 at 00:56
  • 1
    That line is probably executing before the element is instantiated – Jonathan Gray Mar 13 '19 at 00:58
  • 1
    `document.getElementById("minute")` doesn't give you a value. `document.getElementById("minute").value` gives you the value. – Ashley Brown Mar 13 '19 at 01:00
  • What exactly is "preassigned value"? I don't see a `value` property in your `` – yqlim Mar 13 '19 at 01:09
  • Can you please answer the questions about your JavaScript? Where is it defined and **when** does it execute? – Phil Mar 13 '19 at 01:17
  • Sorry guys, I accidentally deleted the value attribute trying to make sure all of the input tag was visible without having to scroll. When I put the min in the console.log it says that the value is null and in my functions that I attempt to use the variable min in, I get the error message cannot read property of null – A-Bro Mar 13 '19 at 01:18
  • It is defined in a script.js file that is linked to the HTML file. It is executed in a function that I did not include in this question because I was concerned about the value being null when I had an attribute stating the value already – A-Bro Mar 13 '19 at 01:19
  • 1
    @A-Bro Exactly what I thought. The reason it's returning null is because `getElementById` can't find your element, and that's probably because the element wasn't yet instantiated. You can solve that initial problem by fixing the order in which things are executed. See Jack Bashford's answer for help in that area. – Jonathan Gray Mar 13 '19 at 01:20
  • _"It is executed in a function"_ when and where is that function called? _"To clarify this variable is at the very top of my file"_ so which is it, executed in a function or defined at the top of your file? – Phil Mar 13 '19 at 01:20
  • Exact duplicate of [Why does jQuery or a DOM method such as getElementById not find the element?](https://stackoverflow.com/questions/14028959/why-does-jquery-or-a-dom-method-such-as-getelementbyid-not-find-the-element) – Phil Mar 13 '19 at 01:22
  • Okay I declared that variable at the very top of my Javascript file. @JonathanGray so even though the page loads with the element and a preset value, the element isn't considered instantiated? Is this order fixed by moving the elements within my HTML file? – A-Bro Mar 13 '19 at 01:24
  • @Phil the function is attached to an event handler that appears further down in the script.js file where all of my Javascript is. – A-Bro Mar 13 '19 at 01:25
  • 1
    @A-Bro That is correct, the page will execute your JavaScript during the page loading process. So if the JavaScript code is executed before the HTML then that HTML element won't be available to the script (until it's instantiated anyway). The `load` event is commonly used to solve this issue. – Jonathan Gray Mar 13 '19 at 01:26
  • @Phil I am not sure how to the use the information in the question that you linked to because my Javascript is in a separate file. It is in a separate file called "script.js". The first line of code is the declaration of my variable. Underneath is a function and following that is an addEventListener to ensure that the function is executed when the event I desire occurs. – A-Bro Mar 13 '19 at 01:32
  • The variable is declared globally and it is used in a function later on – A-Bro Mar 13 '19 at 01:33
  • Okay @JonathanGray, so like Jack Bashford said below the script tag should go at the bottom of the body of the HTML file instead of the the top of the head even though it is a link to another file? This way, the code will be executed properly? – A-Bro Mar 13 '19 at 01:37
  • @JonathanGray thank you for your explanation and help. I have a greater understanding as to what is going on now and can prevent future errors – A-Bro Mar 13 '19 at 01:41

1 Answers1

1

You most likely have your script running before your HTML is loaded. You can fix this two ways:

Place your <script> tag just before the closing </body> tag:

    <script>
        //Your code
    </script>
</body>

Or put all your code inside a window.onload:

window.onload = function() {
    //Your code
};
Jack Bashford
  • 38,499
  • 10
  • 36
  • 67
  • I am confused. I thought my Javascript was ideally to be placed in a separate file. Is that not recommended? I put the link to the script tag in the head portion of my HTML file. If I put my Javascript in a separate file, will it not work properly unless I envelope everything in the function described above? – A-Bro Mar 13 '19 at 01:29
  • 1
    If it's in a separate file, put the ` – Jack Bashford Mar 13 '19 at 01:30
  • Ah okay. Why do tutorials and sites say that it is okay to put the script tag within the head tag then? I put it in the head tag but at the very bottom. The only thing beneath the script tag is the title tag – A-Bro Mar 13 '19 at 01:35
  • Thank you Jack Bashford. Placing the script.js file at the bottom of my body tag worked. I'm really curious now as to why it is stated to be okay to place the script file tag at the head of the HTML file when problems like this can occur. I appreciate any input and thank you again – A-Bro Mar 13 '19 at 01:40
  • 1
    It's all to do with the loading time difference between your script and HTML. – Jack Bashford Mar 13 '19 at 01:43
  • That makes sense. Thank you again, I'm grateful to be able to move on – A-Bro Mar 13 '19 at 01:45