gpt4 book ai didi

javascript - 为什么我在 HTMLLIElement 处收到错误 "Uncaught TypeError: Cannot read property ' style' of undefined。”?

转载 作者:行者123 更新时间:2023-12-03 01:33:03 26 4
gpt4 key购买 nike

<!DOCTYPE html>
<html>
<head>
<title>Simple Todo</title>
<link rel="stylesheet" href="source.css">
<script
src="https://code.jquery.com/jquery-2.2.4.js"
integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI="
crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<h2>TO-DO LIST</h2>
<button id="slide">here!</button>
<div>
<input type="text" placeholder="Add New Todo">
</div>
<ul>
<li>Buy Robes<button>Delete</button></li>
<li>Go shopping<button>Delete</button></li>
<li>Buy noodles<button>Delete</button></li>
</ul>
</div>
<script type="text/javascript" src="source.js"></script>
</body>
</html>

这是 html 文件。

var li=document.querySelectorAll("ul li");
var btn=document.querySelectorAll("li button");
for(i=0;i<li.length;i++){
li[i].addEventListener("mouseover",function(){
btn[i].style.display="block";
});
}

这是链接到它的js。

我已将按钮设置为 display:none; 在 css 中。但是当我将鼠标悬停在 li 上时,它似乎不起作用。

最佳答案

使用let在声明 block 作用域局部变量的 for 循环中。您正在尝试将 display="block" 设置为已经可见的元素。首先使用 CSS 将 display: none 设置为这些元素:

var li = document.querySelectorAll("ul li");
var btn = document.querySelectorAll("li button");
for(let i=0;i<li.length;i++){
li[i].addEventListener("mouseover",function(){
btn[i].style.display="block";
});
}
li > button{
display: none;
}
<div class="container">
<h2>TO-DO LIST</h2>
<button id="slide">here!</button>
<div>
<input type="text" placeholder="Add New Todo">
</div>
<ul>
<li>Buy Robes<button>Delete</button></li>
<li>Go shopping<button>Delete</button></li>
<li>Buy noodles<button>Delete</button></li>
</ul>
</div>

关于javascript - 为什么我在 HTMLLIElement 处收到错误 "Uncaught TypeError: Cannot read property ' style' of undefined。”?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51194472/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com