今天做了第三道題，題目如下：
我做的作業如下，瀏覽器測試沒問題，不過肯定還有需要優化的地方。
<!DOCTYPE html >
<head>
<title> new document </title>
<meta charset="utf-8"/>
</head>
<body>
<input type="button" id="butn" value="顯示/隱藏" />
<div id="div1">標題</div>
<div id="div2">內容</div>
</body>
<script type="text/javascript">
var btn=document.getElementById("butn");
btn.onclick=function(){
var div1=document.getElementById("div1");
var div2=document.getElementById("div2");
var style2=window.getComputedStyle(div2);
div2.style.display=style2.display=="none"?"block":"none";
if(style2.display=="none"){
div1.innerHTML="隱藏了";
btn.value="顯示";
}else{
div1.innerHTML="顯示了";
btn.value="隱藏";
}
}
</script>
</html>
----------------------------------------------------------------------
然而還是有同學可以寫出很簡潔的代碼，其中一個同學把按鈕的value值當作判斷條件，好像比我用display屬性值來判斷方便一些，代碼如下：
還有一位同學用到了addEventListener（），設置了按鈕的“顯示”“隱藏”的交替變化，但沒有實現div內容的顯示和隱藏。
不過添加div的顯示和隱藏還是挺容易的，下面我在前一位同學代碼基礎上改過的，瀏覽器測試也沒有問題。
<script type="text/javascript">
var btn = document.getElementById('butn')
var div1=document.getElementById("div1");
var div2=document.getElementById("div2");
btn.addEventListener('click', change)
function change () {
if (this.value == '顯示') {
this.value = '隱藏'
div1.innerHTML=‘隱藏了’;
div2.style.display=‘none’;
} else {
this.value = '顯示'
div1.innerHTML=‘顯示了’;
div2.style.display=‘block’;
}
}
</script>
今天溫習了獲取元素的方法以及給按鈕綁定事件的方法。后面一個同學作業中用到的btn.addEventListener('事件', 函數名)，是我做題時沒有想到的，希望自己記下來，以后我也可以用用。