Solve the problem that document.getElementBy series methods cannot obtain objects

getElementById cannot get the object

There is a sequence when the browser parses the document. Before the page is loaded, or before the corresponding DOM object is loaded, the corresponding object cannot be obtained.

Look at the following code:

<script>
    var temp = document.getElementById("div");
    alert(temp);
</script>
<body>
<div id="div">
    <input name="username" id="username" type="text">
    <button id="btn">Button</button>
</div>
</body>

In this code, document.getElementById(“div”) cannot get the object, and alert(temp) will pop up null;

This is because when the browser parses the code in the script tag, the DOM elements in the body have not yet been loaded, so naturally nothing can be retrieved.

Solution: Move the code in the script to after the body element.

<body>
<div id="div">
    <input name="username" id="username" type="text">
    <button id="btn">Button</button>
</div>
<script>
    var temp = document.getElementById("div");
    alert(temp);
</script>
</body>

Or add window.onload

<script>
window.onload = function(){
    var temp = document.getElementById("div");
    alert(temp);
    }
</script>

Summarize

The above is the editor's introduction to solving the problem that the document.getElementBy series methods cannot obtain objects. I hope it will be helpful to everyone. Thank you very much for your support of the 123WORDPRESS.COM website!

<<:

>>: HTML solves the problem of invalid table width setting

Use CSS variables to achieve cool and amazing floating effects

Solve the problem that document.getElementBy series methods cannot obtain objects

Use CSS variables to achieve cool and amazing floating effects

How to configure common software on Linux

Detailed explanation of the solution to keep the content within the container in flex layout

HTML table_Powernode Java Academy

HTML hyperlink style (four different states) setting example

Three strategies for rewriting MySQL query statements

The use and methods of async and await in JavaScript

Analysis of how to create a stored procedure in MySQL to add new fields to a data table

5 basic skills of topic page design (Alibaba UED Shanmu)

MySQL DML language operation example

Recommend

Should I use UTF-8 or GB2312 encoding when building a website?

This article summarizes the specific use of CSS two-column layout and three-column layout

The process of JDK installation and configuration of environment variables under WIN10 (detailed version)

Solve the problem of VScode configuration remote debugging Linux program

How to use async and await in JS

CSS style control to achieve IE submission form record history click return information is still there

MySQL 8.0.13 installation and configuration method graphic tutorial under win10

Detailed installation tutorial for MySQL zip archive version (5.7.19)

Complete tutorial on installing Apache, MySQL, PHP, LAMP on Ubuntu 18.04

centos7.2 offline installation mysql5.7.18.tar.gz

Detailed explanation of the implementation process of ServerSocket default IP binding

Vue realizes adding watermark to uploaded pictures (upgraded version)

MySQL 4G memory server configuration optimization

Introduction to Common XHTML Tags

Play mp3 or flash player code on the web page