vanilla js onclick if语句问题答案

【问题标题】：vanilla js onclick if statement issuevanilla js onclick if语句问题
【发布时间】：2016-01-21 13:58:18
【问题描述】：

我试图在单击另一个元素时影响对元素高度的更改。我正在使用 if else 语句来来回切换更改。

var bnr = document.getElementById("bnr");
var btn = document.getElementById('btn');

if (bnr.style.height = "250px") { 
  btn.onclick = function() {
    bnr.style.height = "600px";
  };
}   
else if (bnr.style.height = "600px") { 
  btn.onclick = function() {;
    bnr.style.height = "250px";
  };
};

第一个语句有效，将元素高度更改为 600px，但第二个语句不起作用，如果再次单击，元素将保持在 600px。

有人能看出我在哪里出错了吗？

JS Fiddle example

【问题讨论】：

if 语句应该是 '==' 而不是 '='
这似乎完全停止了它的工作jsfiddle.net/66un8s8a
您应该尝试使用调试器单步调试您的代码，您会很快发现问题。

标签： javascript if-statement

【解决方案1】：

您的代码在页面加载时运行（我假设），由于此时高度为 250 像素，因此创建了一个单击事件以将高度设置为 600 像素。每次单击按钮时，都会运行相同的事件，因为您问题中的代码不会再次运行。我想你想要：

var btn = document.getElementById('btn');

btn.onclick = function() {

  var bnr = document.getElementById("bnr");

  if (bnr.style.height === "250px")
  { 
      bnr.style.height = "600px";
  } else {
      bnr.style.height = "250px";
  }
};

【讨论】：

这似乎与“250px”的重复不干。我还认为至少应该建议避免直接在元素上设置、检查和重置样式的反模式。
@torazaburo - 它回答了手头的问题，解释了他们（从根本上）出错的原因。您的回答会有些模糊 - 如果您不同意，请随时提供您自己的答案。
它已经由@pavgra 提供。总是有一个关于“打开盒子”多少的问题，在回答一些最小的修复来解决“手头的问题”方面，而不是退后一步并指出更好的方法，无论是在简化问题方面，或者降低 PO 一开始就遇到问题的可能性，或者只是指出最佳实践。就个人而言，我倾向于后者：我觉得，让我们利用教学时间吧！然而，虽然有些发帖者或读者可能会喜欢这样，但有些人可能会讨厌它。

【解决方案2】：

你应该这样做：

var bnr = document.getElementById("bnr");
var btn = document.getElementById('btn');

btn.onclick = function() {
  if (bnr.style.height == "250px" || !bnr.style.height)
  { 
      bnr.style.height = "600px";
  }     
  else if(bnr.style.height == "600px")
  { 
      bnr.style.height = "250px";
  };      
};

https://jsfiddle.net/crfdhtes/1/

【讨论】：

【解决方案3】：

最好使用类操作来改变元素的样式。所以你可以添加“扩展”类：

#bnr.expanded {
  height: 600px;
}

并在点击时切换它：

var btn = document.getElementById('btn');

btn.onclick = function() {
  var bnr = document.getElementById('bnr');
  bnr.classList.toggle('expanded');
};

【讨论】：

这在 IE