Javascript 单击时切换此按钮需要帮助吗
单击按钮时,所选元素的可见性更改为“可见”后,我希望再次单击按钮时,它会更改回“隐藏”。所以基本上我想切换按钮 但它似乎不起作用。我能知道如何解决这个问题吗Javascript 单击时切换此按钮需要帮助吗,javascript,html,dom-events,Javascript,Html,Dom Events,单击按钮时,所选元素的可见性更改为“可见”后,我希望再次单击按钮时,它会更改回“隐藏”。所以基本上我想切换按钮 但它似乎不起作用。我能知道如何解决这个问题吗 //Imported jumbotron element var jumbo = document.getElementById("bill-board"); //project, skills and contact elements var projects = document.getElementById("projects"
//Imported jumbotron element
var jumbo = document.getElementById("bill-board");
//project, skills and contact elements
var projects = document.getElementById("projects");
var skills = document.getElementById("skills");
var contact = document.getElementById("contact");
//Functionality that takes place when projects, skills and contact are clicked
//When the projects element is clicked
projects.addEventListener("click", () => {
if(document.getElementById("one").style.visibility = "hidden") {
one.style.visibility = "visible";
jumbo.textContent = "Projects";
console.log("It's visible and bill-board is changed to projects");
} else {
one.style.visibility = "hidden";
}
})
//When skills element is clicked
skills.addEventListener("click", () => {
if(document.getElementById("two").style.visibility = "hidden") {
two.style.visibility = "visible";
jumbo.textContent = "skills";
console.log("It's visible and bill-board is changed to skills");
} else {
one.style.visibility = "hidden";
}
})
//When contact element is clicked
contact.addEventListener("click", () => {
if(document.getElementById("three").style.visibility = "hidden") {
three.style.visibility = "visible";
jumbo.textContent = "Contacts";
console.log("It's visible and bill-board is changed to contacts");
} else {
one.style.visibility = "hidden";
}
})
你好
基本上有两个问题
问题1
您正在错误地检查可见性的状态
if(document.getElementById("one").style.visibility = "hidden")
这应如下:
if(document.getElementById("one").style.visibility == "hidden")
相等运算符是==
问题2
在这个片段中
if(document.getElementById("one").style.visibility = "hidden") {
one.style.visibility = "visible";
jumbo.textContent = "Projects";
console.log("It's visible and bill-board is changed to projects");
} else {
one.style.visibility = "hidden";
}
您没有存储通过调用获取的元素
document.getElementById("one")
同样地,你应该为二和三做
let one = document.getElementById("one");
if(one.style.visibility == "hidden") {
one.style.visibility = "visible";
jumbo.textContent = "Projects";
console.log("It's visible and bill-board is changed to projects");
} else {
one.style.visibility = "hidden";
}