我正在做这个 GPS 项目，遇到了一个问题。我想构建一个由 360x180 网格项组成的网格，每个网格项代表一个 GPS 坐标，它动态地获取一个自己的非常特定的类，以便我稍后可以识别该坐标并使用它。不幸的是，浏览器返回给我这个错误消息：TypeError：无法读取 null 的属性（读取“classList”）。
我尝试选择坐标的确切单个类，然后使用 classList.add() 方法添加一个新类（'active'），我想在 CSS 中操作它，以便该坐标将获得红色背景&它将在网格上可见。效果不太好，我也在玩选择器，但没有任何效果。唯一奇怪的是在 css 中手动设置颜色，如下所示：
.column-350-row-100 {
background-color: rgb(207, 18, 11);
}
但这显然不是很有帮助。
html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>GPS-coordinate Tool</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="grid-container"></div>
<script src="script.js"></script>
</body>
</html>
javascript:
'use strict';
//creates grid (for visual understanding) for every single GPS-coordinate. Then add's for each div a specified class.
document.addEventListener('DOMContentLoaded', function () {
const container = document.querySelector('.grid-container');
for (let lo = 1; lo <= 180; lo++) {
for (let la = 1; la <= 360; la++) {
const div = document.createElement('div');
div.className = 'grid-item';
container.appendChild(div);
div.classList.add(`la-${la}-lo-${lo}`);
}
}
});
// "Generates" and returns random GPS coordinates in an object
const randomGpsCoordinates = function () {
const gpsCoordinate = {
latitude: Math.trunc(Math.random() * 360) + 1,
longitude: Math.trunc(Math.random() * 180) + 1,
};
return gpsCoordinate;
};
//empty array to save all Objects which consist of one GPS coordinate pair each (longitude, latitude)
const gpsCoordinates = [];
//Generates and fills the array with each GPS coordinate
for (let i = 0; i < 5; i++) {
gpsCoordinates.push(randomGpsCoordinates());
}
//Problem to solve: this doesn't work, in the Browser it shows me that the '.la-5-lo-100' should exists, but if I try to select it it ends in an error
// => TypeError: Cannot read properties of null (reading 'classList')
document.querySelector('.la-5-lo-100').classList.add('active');
CSS：
.grid-container {
display: grid;
grid-template-columns: repeat(360, 1fr); /* Creates 18 columns */
grid-template-rows: repeat(180, 5px); /* Creates 36 rows of 50px each */
}
.grid-item {
background-color: #f0f0f0;
border: 1px solid #ccc;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px; /* Optional for text inside grid items */
}
.active {
background-color: rgb(207, 18, 11);
}
.column-350-row-100 {
background-color: rgb(207, 18, 11);
}
这会引发错误，因为您使用 Javascript 添加元素，而此时它正在查找的 DOM 元素不存在， 这就是你所拥有的，但它不起作用：
document.querySelector('.la-5-lo-100').classList.add('active');
请检查该元素是否确实存在：
const element = document.querySelector('.la-5-lo-100');
if (element) {
element?.classList?.add('active')
}
如果这不起作用，请将类列表添加行移到 Javascript 文件顶部的第二个 for 循环下方。
如果这不起作用，在第一个 foo 循环之后添加一个 let 变量，以便它向您发出信号，表明项目已完全加载，然后尝试添加 className， 事情是这样的：
let hasFinishedRendering = false;
document.addEventListener('DOMContentLoaded', function () {
const container = document.querySelector('.grid-container');
for (let lo = 1; lo <= 180; lo++) {
for (let la = 1; la <= 360; la++) {
const div = document.createElement('div');
div.className = 'grid-item';
container.appendChild(div);
div.classList.add(`la-${la}-lo-${lo}`);
}
}
hasFinishedRendering = true
});
const element = document.querySelector('.la-5-lo-100');
if (element && hasFinishedRendering) {
element?.classList?.add('active')
}