我是一个Java开发人员,正在学习javascript。我有一个选择书下拉列表,我可以从中选择一本书。选择时,我将显示以下消息。
You have selected <selectedBook> book!
<!DOCTYPE html>
<html>
<head>
<script>
function selectBook() {
var selectedBook = document.getElementById("books").value;
if (selectedBook=='select') {
document.getElementById("displaySelectedBook").style.display = "none";
alert("Please select a valid book");
return;
}
document.getElementById("displaySelectedBook").style.display = "block";
document.getElementById("displaySelectedBook").innerHTML = "You have selected " + selectedBook.bold() + " book!";
}
</script>
</head>
<body>
<br>
<table style="width:30%" border="1" align="center">
<tr>
<th>Select a Book</th>
<td>
<select id="books" onchange="selectBook()
">
<option value="select">Select</option>
<option value="Head First Java">Head First Java</option>
<option value="Complete Reference">Complete Reference</option>
<option value="Gang of four">Gang of four</option>
<option value="Effective Java">Effective Java</option>
</select>
</td>
</tr>
<tr>
<td colspan="2" align="center" style="display: none;">
<button type="button" onclick="selectBook()">Select!</button>
</td>
</tr>
</table>
<p id="displaySelectedBook"/>
</body>
</html>
问题是当我选择一本有效的书时,比如说
Complete Reference
,然后我选择“
select
,预期的行为是
displaySelectedBook
应在显示警报消息之前消失。但它的作用是相反的。
当我引入如下所示的延迟时,效果很好
setTimeout(function() {
alert("Please select a valid book");
}, 1);
代码不应该按顺序运行吗?有人能解释一下这里的行为吗?谢谢