英文:
How to give a random style (top/left) to the const with queryselector?
问题
我无法给starLoc常量使用JavaScript添加样式。
我遇到了这个错误：
script.js:14 Uncaught TypeError: Cannot read properties of undefined (reading 'style')
在starLoc[i].style.left = rndLeft + 'px'; //14行中
有问题的代码如下：
const btn = document.getElementById('btn');
const star = document.querySelector('.space');
const starLoc = document.querySelectorAll('.star-obj');
var rndLeft = Math.floor(Math.random()*1000);
var rndTop = Math.floor(Math.random()*1000);
function startSpacing(){
btn.style.display = 'none';
starMove();
}
function starMove(){
for(var i = 0; i <= 60; i++){
star.innerHTML += '<div class="star-obj">*</div>';
starLoc[i].style.left = rndLeft + 'px'; //14行
starLoc[i].style.top = rndTop + 'px';
}
}
请注意，问题可能出在starLoc数组中。您需要确保starLoc中有足够的元素，以便通过索引i来访问。如果starLoc的长度小于i，将导致访问未定义的元素，从而引发JavaScript错误。
英文:
I cant give a style with js to the starLoc Const
i get this error:
script.js:14 Uncaught TypeError: Cannot read properties of undefined (reading 'style')
at starMove (script.js:14:20)
const btn = document.getElementById('btn');
const star = document.querySelector('.space');
const starLoc = document.querySelectorAll('.star-obj');
var rndLeft = Math.floor(Math.random()*1000);
var rndTop = Math.floor(Math.random()*1000);
function startSpacing(){
btn.style.display = 'none';
starMove();
}
function starMove(){
for(var i = 0; i <= 60; i++){
star.innerHTML += '<div class="star-obj">*</div>';
starLoc[i].style.left = rndLeft + 'px'; //14 line
starLoc[i].style.top = rndTop + 'px';
}
}
<body>
<div class="start">
<button id="btn" onclick="startSpacing()">Start Space Moving</button>
</div>
<div class="space"></div>
<script src="script.js"></script>
</body>
what is wrong with const?
Do not judge strictly, I'm a beginner
答案1
得分: 1
你可以使用 document.getElementsByClassName 来获取一个元素的实时 HTMLCollection。
const starLoc = document.getElementsByClassName('star-obj');
然而，在循环中，你应该真正使用 document.createElement。
for (let i = 0; i <= 60; i++) {
const div = document.createElement('div');
div.textContent = '*';
div.style.left = rndLeft + 'px';
div.style.top = rndTop + 'px';
star.append(div);
}
英文:
You can use document.getElementsByClassName to get a live HTMLCollection of elements.
const starLoc = document.getElementsByClassName('star-obj');
However, you should really use document.createElement in the loop instead.
for (let i = 0; i <= 60; i++) {
const div = document.createElement('div');
div.textContent = '*';
div.style.left = rndLeft + 'px';
div.style.top = rndTop + 'px';
star.append(div);
}
答案2
得分: 1
在你的HTML中，你在调用startSpacing()，但实际函数名是starMove()。其次，你是动态生成元素，所以需要在每次调用函数时获取它们。这意味着需要将starLoc 移到函数内部。以下是带有color: red;的示例：
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
const star = document.querySelector('.space');
let rndLeft = Math.floor(Math.random() * 1000);
let rndTop = Math.floor(Math.random() * 1000);
function starMove() {
for (let i = 0; i <= 60; i++) {
star.innerHTML += '<div class="star-obj">*</div>';
let starLoc = document.querySelectorAll('.star-obj');
starLoc[i].style.color = 'red';
}
}
<!-- language: lang-html -->
<div class="start">
<button id="btn" onclick="starMove()">开始星空移动</button>
</div>
<div class="space"></div>
<!-- end snippet -->
以上是你要翻译的内容。
英文:
First, in your HTML you call startSpacing() while the function name is starMove(). Second, you dynamically generate elements, so you need to get them every time the function is called. This means moving starLoc to the function. See the example with color: red;
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
const star = document.querySelector('.space');
let rndLeft = Math.floor(Math.random() * 1000);
let rndTop = Math.floor(Math.random() * 1000);
function starMove() {
for (let i = 0; i <= 60; i++) {
star.innerHTML += '<div class="star-obj">*</div>';
let starLoc = document.querySelectorAll('.star-obj');
starLoc[i].style.color = 'red';
}
}
<!-- language: lang-html -->
<div class="start">
<button id="btn" onclick="starMove()">Start Space Moving</button>
</div>
<div class="space"></div>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论