单击按钮后，仅使用 JS 脚本的第一部分，第二次单击后无效果答案

【问题标题】：after clicking on button only first part of JS script is used, after second click none works单击按钮后，仅使用 JS 脚本的第一部分，第二次单击后无效果
【发布时间】：2022-11-19 23:27:52
【问题描述】：

嘿这是我的功能

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()
}

}

第一部分工作完美，但第二次点击后没有任何反应..

Idk怎么了，有人可以提出一些建议吗？

///UPDATE

单击此后：

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

我可以打开侧边栏，但再次单击后我无法关闭它。：/

【问题讨论】：

当您第二次点击（点击什么？）时，您期望发生什么？请提供完整的（自给自足的）示例来重现问题。
@Nikolay 完成了，我忘记展示我的按钮了
在您的 if-statement 中，您正在进行分配而不是比较。应该是 if(item == "0%")。
@zelite 我改变了它但没有工作：/

标签： javascript

【解决方案1】：

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%"。尝试解决这些问题，让我知道代码是否有效

【讨论】：

【解决方案2】：

您需要在样式表中将 id 为“main”的元素的默认 marginLeft 设置为 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%"){
        w3_open()
    } else if (item = "20%"){    
         w3_close()
       }
}

【讨论】：

【解决方案3】：

我希望它有效

如果没有，请告诉我

首先你为什么写这个。因为它们在打开和关闭功能上是一样的？

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() }

【讨论】：

这甚至不打开这个..
对不起。现在检查
我在用手机。你能给我发一个屏幕截图或照片吗？