javascript - onclick 在第一次点击时不触发

Question

注意:关于此主题有一些类似的问题和答案，但它们似乎都适用于更复杂的问题和问题。这个很简单。

我第一次单击按钮时，JavaScript 函数不会触发。在第二次单击和此后的每次单击时，它都会按预期工作。我确信我错过了一些简单的东西，但我无法发现问题。

function changeStyle() {		
	
    var a = document.getElementsByClassName('container')[1];
		
    if (a.style.backgroundColor === 'blue') {
    	a.style.backgroundColor = 'red';
    } else {
	    a.style.backgroundColor = 'blue';
    }
		
}

.container {
    display: block;
    height: 100px;
    background-color: blue;
    border-bottom: 1px solid black;
    cursor: pointer;
}

<div class="container" onclick="changeStyle()"></div>
<div class="container"></div>

Answer 1

由于第一次单击时有 style.background=''，因此即使事件正在触发，它仍然保持蓝色。这是解决该问题的一种方法。

function changeStyle() {		
	
    var a = document.getElementsByClassName('container')[1];
    if (a.style.backgroundColor === 'blue' || a.style.backgroundColor === '') {
    	a.style.backgroundColor = 'red';
    } else {
	    a.style.backgroundColor = 'blue';
    }
		
}

.container {
    display: block;
    height: 100px;
    background-color: blue;
    border-bottom: 1px solid black;
    cursor: pointer;
}

<div class="container" onclick="changeStyle()"></div>
<div class="container"></div>