Нужна помощь в переключении этой кнопки при нажатии - PullRequest
Новая
       13

Нужна помощь в переключении этой кнопки при нажатии

0 голосов
/ 27 марта 2020

После того, как видимость выбранного элемента будет изменена на «видимая» при нажатии кнопки, я бы хотела, чтобы она снова стала «скрытой» при повторном нажатии кнопки. В общем, я бы хотел переключить кнопку.

Но, похоже, она не работает. Могу ли я узнать, что делать, чтобы решить эту проблему? 

//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 Ответ

1 голос
/ 27 марта 2020

Привет

В основном есть две проблемы

Проблема 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")
в переменную "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";
}

Аналогично вы должны сделать для двух и трех.

...