javascript - 需要帮助在单击时切换此按钮

Question

单击按钮时所选元素的可见性更改为“可见”后，我希望再次单击按钮时将其更改回“隐藏”。所以基本上我想切换按钮。

但似乎不起作用。我可以得到一些关于如何解决这个问题的指导吗？

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

Answer 1

嗨

基本上有两个问题

问题 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")

into the variable "one" ..i.e the above snippet should be this.

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

同样，您应该为两个和三个做同样的事情。