问题描述
我有一个 html 列表(如待办事项列表),我希望在用户向该列表中添加 5 个项目时显示一个按钮。
我用 js 写了这个,但它不起作用:
function addButton(){
const glist = document.querySelectorAll('.gratitude_container > ul > li')
const gratListArray = Array.from(glist);
if (gratListArray === 4) {
FortuneButton.classList.remove('hidden')
}
我的 html 是:
<form>
<input type="text" placeholder="Enter it here..." class="gratitude_input" />
<button class="gratitude_button" type="submit">
<i class="fas fa-plus-circle"></i>
</button>
</form>
</div>
<div class="gratitude_container">
<ul class="gratitude_list"></ul>
</div>
</div>
有什么想法吗?
解决方法
你能在代码笔的演示中重现这个问题吗? 查看您提供的代码,JS 永远不会命中,因为您的 ul 中没有任何 li。但这可能只是您粘贴的内容。
如果您可以针对同样的问题制作演示,那么帮助您会更容易。
,可能您应该在 IF 语句中使用 gratListArray.length。
,enter code here
function showButton() {
const list = document.getElementsByClassName("gratitude_list")[0];
let items = list.getElementsByTagName("li");
const button = document.getElementById("newButton");
if (items.length >= 5) {
button.style.display = "block";
} else {
button.style.display = "none";
}
}
showButton();
<div class="gratitude_container">
<ul class="gratitude_list">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<button id="newButton">Button</button>
</div>
假设您按预期获得数组,我的解决方案是为您的函数添加一个事件侦听器。
根据您共享的代码,我看不出是什么触发了您当前的功能。 所有函数都需要由事件声明,例如。页面加载、计时器或用户交互……仅举几例。每次单击时都会使用事件侦听器更新数组并测试 if 语句。
document.querySelector("button").addEventListener("click",() => {
const glist = document.querySelectorAll('.gratitude_container > ul > li')
const gratListArray = Array.from(glist);
if (gratListArray.length === 4) {
FortuneButton.classList.remove('hidden')
})
希望对您有所帮助并祝您编程愉快。