После нажатия на кнопку используется только первая часть JS-скрипта, после второго нажатия ничего не работает

Привет, это моя функция

function open() {
            
        document.getElementById("main").style.marginLeft = "20%";
        document.getElementById("mySidebar").style.width = "20%";
        document.getElementById("mySidebar").style.display = "block";
    document.getElementById("openNav").style.display = 'inline-block';
        }
function close() {
        document.getElementById("main").style.marginLeft = "0%";
        document.getElementById("mySidebar").style.display = "none";
        document.getElementById("openNav").style.display = "inline-block";
}

function Test() {
var item = document.getElementById("main").style.marginLeft ="";
if (item = "0%")
{
    w3_open()
    item = document.getElementById("main").style.marginLeft = "20%";
} else if (item = "20%")
{
    w3_close()
}

}

Первая часть работает отлично, но после второго нажатия ничего не происходит.

ИДК, что не так, может кто-то какие-то предложения?

///ОБНОВИТЬ

После нажатия на это:

<button id="openNav" class="w3-button w3-teal w3-xlarge" onclick="Test()">&#9776;</button>

Я могу открыть боковую панель, но после повторного нажатия я не могу ее закрыть. :/

Что вы ожидаете, когда вы щелкнете (щелкните что?) во второй раз? Пожалуйста, предоставьте полный (самостоятельный) пример, чтобы воспроизвести проблему.

Nikolay 19.11.2022 16:03

@Николай готово, я забыл показать свою кнопку

Software Architect 19.11.2022 16:07

в своем if-утверждении вы делаете присваивание, а не сравнение. Должно быть, если (item == "0%").

zelite 19.11.2022 16:08

@zelite я изменил это, но не работает :/

Software Architect 19.11.2022 16:10

вы удалили =""; из первой строки функции Test()? Смотрите мой ответ ниже.

pzutils 19.11.2022 16:35

@pzutils да, я изменился, и ничего не произошло.

Software Architect 20.11.2022 13:11
Создайте ползком, похожим на звездные войны, с помощью CSS и Javascript
Создайте ползком, похожим на звездные войны, с помощью CSS и Javascript
Если вы веб-разработчик (или хотите им стать), то вы наверняка гик и вам нравятся "Звездные войны". А как бы вы хотели, чтобы фоном для вашего...
учебник по Javascript
учебник по Javascript
JavaScript - это язык программирования, который обычно используется для добавления интерактивности и других динамических функций на веб-сайты. Он...
Как использовать d3.js для рисования 2D SVG-элементов в приложении Angular?
Как использовать d3.js для рисования 2D SVG-элементов в приложении Angular?
D3.js - это обширная библиотека, используемая для привязки произвольных данных к объектной модели документа (DOM). Мы разберем основные варианты...
Освоение принципов SOLID в JavaScript: Пошаговое руководство
Освоение принципов SOLID в JavaScript: Пошаговое руководство
Принцип единой ответственности (SRP): класс должен иметь только одну причину для изменения. Другими словами, у него должна быть только одна...
JavaScript - For Loop
JavaScript - For Loop
Наиболее используемая компактная форма оператора цикла.
Неделя 1 - Карточки с временной шкалой
Неделя 1 - Карточки с временной шкалой
Поскольку это была первая неделя, я решил начать с простого. Предполагалось, что у меня будет временная шкала с несколькими карточками, которые можно...
0
6
75
4
Перейти к ответу Данный вопрос помечен как решенный

Ответы 4

надеюсь это работает

Если это не так, пожалуйста, дайте мне знать.

Во-первых, почему вы пишете это. Поскольку они одинаковы как в функции открытия, так и в функции закрытия?

Id("openNav").style.display='inline-block';

В

function close() and open()

попробуйте это с примечанием выше.

function open() { 

document.getElementById("main").style.marginLeft = "20%"; 

  document.getElementById("mySidebar").style.width = "20%";  
 
document.getElementById("mySidebar").style.display = "block"; 

 document.getElementById("openNav").style.display = 'inline-block'; } 
 function close() { 

 document.getElementById("main").style.marginLeft = "0"; 

 document.getElementById("mySidebar").style.width = "0 !important"; 

 document.getElementById("openNav").style.display = "inline-block"; } 
function Test() { 
var item=document.getElementById("main").style.marginLeft ;
 if (item == "0") { 
 w3_open() item = document.getElementById("main").style.marginLeft ;
} else if (item == "20%") { w3_close() }

это даже не открывается..

Software Architect 19.11.2022 16:19

Извините.проверьте сейчас

reza hrkeng 19.11.2022 16:21

Я с мобильного телефона. Можете ли вы прислать мне снимок экрана или картинку.

reza hrkeng 19.11.2022 16:22

оператор if else все еще перепутался - вы должны оценивать item == "0%", а не присваивать item = "0%"

pzutils 19.11.2022 16:31

Я просто копирую код. Что-то пошло не так при отправке. Проверьте

reza hrkeng 19.11.2022 16:38

Пожалуйста, не голосуйте против, сначала проверьте свою проблему

reza hrkeng 19.11.2022 16:40

не работает, не знаю почему.. если я буду знать, я не буду спрашивать.

Software Architect 19.11.2022 16:54

Можете ли вы поделиться своим кодом и картинкой где-нибудь, чтобы увидеть, что вы сделали, чтобы я мог вам помочь

reza hrkeng 19.11.2022 16:55

Да, мы можем пойти в чат. Скажи мне, если это возможно

Software Architect 19.11.2022 16:58

Давай сделаем это. Я на

reza hrkeng 19.11.2022 17:04

item никогда не будет равно "0%", потому что вы специально устанавливаете его на "" здесь:

var item = document.getElementById("main").style.marginLeft ="";

Вот почему он всегда переходит к оператору else. Измените эту строку на var item = document.getElementById("main").style.marginLeft

Также только что заметил, что ваш оператор if else перепутался - вам нужно использовать == вместо =. Ваш оператор if в настоящее время присваивает item = "0%", но вы хотите, чтобы он вместо этого оценивал if item == "0%". Так что на самом деле это еще одна причина, по которой он всегда открывается, потому что присвоение значения внутри оператора if в основном всегда будет оцениваться как true. Попробуйте исправить эти проблемы и сообщите мне, работает ли код.

Еще одно замечание - w3_open() и w3_close() должны быть просто open() и close()

Здравствуйте, это не работает. Просто открывается и не закрывается :/...

Software Architect 19.11.2022 16:52

позвольте мне увидеть ваш исправленный код - он работает для меня

pzutils 19.11.2022 17:31

main также должно иметь существующее значение по умолчанию для margin-left, как указано в ответе anurag-dhamala ниже

pzutils 19.11.2022 17:52

Это не работает!

Software Architect 20.11.2022 13:12

Вам нужно установить значение marginLeft по умолчанию для элемента с идентификатором «main» на 0% в таблице стилей. Затем измените свои функции, как показано ниже:

function open() {
        
    document.getElementById("main").style.marginLeft = "20%";
    document.getElementById("mySidebar").style.width = "20%";
    document.getElementById("mySidebar").style.display = "block";
    }
function close() {
    document.getElementById("main").style.marginLeft = "0%";
    document.getElementById("mySidebar").style.display = "none";
}

function Test() {
    var item = document.getElementById("main").style.marginLeft;
    if (item == "0%"){
        open()
    } else if (item == "20%"){    
         close()
       }
}

операторы if else здесь все еще перепутались - вам нужно оценивать item == "0%", а не назначать item = "0%"

pzutils 19.11.2022 16:29

Ой! Просто скопируйте ответ из вопроса. И забыл его изменить. Виноват

anurag-dhamala 19.11.2022 16:32

@anurag-dhamala это не работает

Software Architect 19.11.2022 16:53

Ответ отредактирован. Проверь это. Забыли изменить имена функций. У вас разные имена при определении и вызове.

anurag-dhamala 19.11.2022 16:57

@anurag-dhamala не работает :O

Software Architect 20.11.2022 13:12
Ответ принят как подходящий

Здесь возникает ряд проблем, включая присвоение значений, когда они должны выполнять сравнения (отмечено в нескольких комментариях и других ответах).

Даже если синтаксис исправлен, я подозреваю, что функция никогда не будет работать, потому что значение marginLeft никогда не устанавливалось с самого начала, а это означает, что ни open(), ни close() никогда не будут вызываться, поскольку они вызываются только в том случае, если найдено определенное значение.

В методе Test() все можно упростить с помощью одной оценки. Вот обновленная версия:

function open() {
   document.getElementById("main").style.marginLeft = "20%"
   document.getElementById("mySidebar").style.width = "20%"
   document.getElementById("mySidebar").style.display = "block"
   document.getElementById("openNav").style.display = "inline-block"
}

function close() {
   document.getElementById("main").style.marginLeft = "0%"
   document.getElementById("mySidebar").style.display = "none"
   document.getElementById("openNav").style.display = "inline-block"
}

function Test() {
   var item = document.getElementById("main").style.marginLeft

   // simplified condition
   if (item == "20%") close()
   else open()
}

Это ответ на мой вопрос! Спасибо чувак!

Software Architect 20.11.2022 13:14

Другие вопросы по теме