滑鼠移上時修改內容的效果竟然出現錯誤訊息

joo

您好：
我想要做出滑鼠移上時修改內容的效果
這樣在網頁上看是有修改了內容
但打開firebug主控台卻會出現錯誤訊息：TypeError: this.getElementsByTagName(...)[0] is undefined
仔細檢查發現如果在網頁上滑鼠移到<p>元素上時不會有錯誤訊息
但移到<span>上就會產生錯誤訊息
請問這是什麼原因？
謝謝

<div id="nav">
        <p>aaa<span style="margin-left:20px;">000</span></p>
        <p>bbb<span style="margin-left:20px;">111</span></p>
        <p>ccc<span style="margin-left:20px;">222</span></p>
</div>

<script>
var all_p = document.getElementById("nav").getElementsByTagName("p");

// 遍歷每個 p 元素
for(var i=0; i<all_p.length; i++){
        var ppp = all_p[i];
        ppp.original_content = ppp.innerHTML;
        // 移上時
        ppp.onmouseover = function(){
                this.innerHTML = this.getElementsByTagName("span")[0].innerHTML;
        }
        // 移出時
        ppp.onmouseout = function(){
                this.innerHTML = this.original_content;
        }
}
</script>

joo

例如當我滑鼠移上 aaa、bbb 或 ccc 時都正常，
但若是移上 000、111 或 222 時
firebug主控台就會出現錯誤訊息：TypeError: this.getElementsByTagName(...)[0] is undefined
請問有大大知道為什麼會這樣嗎
謝謝

wmh

問題是你為什麼要寫這麼奇怪的程式？

joo

您好：
不好意思，讓您見笑了。
正式上線時會設定 span{display:none;}把 <span> 隱藏起來，
當滑鼠移上 <p> 時才用 <span> 的文字替換掉 <p> 的文字。
但我想了解為何現在滑鼠移上 <span> 時，
firebug主控台會出現錯誤訊息：TypeError: this.getElementsByTagName(...)[0] is undefined，
但移上 <p> 時卻是正常。

wmh

若單純是這樣的需求，建議你改用 CSS 處理即可。

p:hover span {
  display: inline-block;
}

joo

您好：
我會再研究看看。
謝謝您的回答。