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";
}