set display: block在javascript中不起作用

你好，我的代码有一个问题。我想在点击"start"时设置display: block按钮。我创建了addevenlistener点击，但有些东西是错误的。有人能帮我吗?

const ulElement = document.querySelectorAll("li");
const btn = document.querySelector("button");

function changeSize() {
ulElement.style.display = "block";
}
btn.addEventListener("click", changeSize);

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>list</title>
<style>
li {
display: none;
}
</style>
</head>
<body>

<button>Start</button>
<ul>
<li>element 1</li>
<li>element 2</li>
<li>element 3</li>
<li>element 4</li>
<li>element 5</li>
<li>element 6</li>
<li>element 7</li>
<li>element 8</li>
<li>element 9</li>
<li>element 10</li>
</ul>
<script src="main.js"></script>
</body>
</html>

不确定这是否是你想要的，但如果你改变:

li {
display: none;
}

ul {
display: none;
}

如果你改变:

const ulElement = document.querySelectorAll("li");

const ulElement = document.querySelector("ul");

然后它将工作列表将出现后，点击按钮....

你有querySelectorAll你选择了所有的lielement你应该有一个数组节点列表而不是单个元素因此为什么你不能在数组中使用e.style.display，你需要做的是循环遍历所有项目并逐个设置它们的显示

const ulElement = document.querySelectorAll("li");
const btn = document.querySelector("button");

function changeSize() {
ulElement.forEach(e => e.style.display = "block")
//ulElement.style.display = "block";
}
btn.addEventListener("click", changeSize);

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>list</title>
<style>
li {
display: none;
}
</style>
</head>
<body>

<button>Start</button>
<ul>
<li>element 1</li>
<li>element 2</li>
<li>element 3</li>
<li>element 4</li>
<li>element 5</li>
<li>element 6</li>
<li>element 7</li>
<li>element 8</li>
<li>element 9</li>
<li>element 10</li>
</ul>
<script src="main.js"></script>
</body>
</html>

相关内容

最新更新

热门标签：