vanilla js onclick if statement issue

Question

我試圖影響單擊另一個元素時元素高度的更改。我正在使用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"; 
    }; 
}; 

第一條語句的作品，改變要素高度600像素，不過第二條語句不工作和元素停留在600px的，如果你再次點擊。

是否有人能夠看到我在哪裏出錯？

JS Fiddle example

Answer 1

你的代碼運行在頁面加載（我認爲）和高度爲250像素，在這一點上，創建一個click事件的高度設置爲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"; 
    } 
}; 

Answer 2

你shold這樣做：

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/

Answer 3

這是更好地使用類操作來更改元素的樣式。所以，你可以添加「擴展」類：

#bnr.expanded { 
    height: 600px; 
} 

和撥動它點擊：

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

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