javascript不適用於LI標簽

Question

嗨，我有這個代碼

HTML代碼

<ul>
<input type="button" onclick="appear()"/>
<li id="addQuestionChoices">roma</li>
</ul>

CSS代碼

#addQuestionChoices{display:none;}

JavaScript代碼

function appear()
{document.getElementById('addQuestionChoices').style.display="block";}

但是當我按下按鈕時，什么也沒發生，javascript是否無法與LI標簽一起使用？ 要不然是啥 ？ 謝謝你的回答

Answer 1

<li>標記必須位於<ul>或<ol> ，並且<ul>和<ol>唯一允許的子代是<li>標記。 這意味着您的<input>應該在<ul> ：

<input type="button" onclick="appear()"/>
<ul>
    <li id="addQuestionChoices">roma</li>
</ul>

Answer 2

只需確保在函數之前定義函數，例如在這個小提琴中： http : //jsfiddle.net/2dUfa/

<script>
function appear() {
    document.getElementById('addQuestionChoices').style.display= "block";
}
</script>
<input type="button" onclick="appear()" value="appear" />

<ul>
   <li id="addQuestionChoices">roma</li>
</ul>

附帶說明： <li>元素的默認顯示屬性是list-item （而不是block ）

Answer 3

嘗試將<li>放在<ol>或<ul>標記內。

Answer 4

在HTML中嵌入JavaScript調用是一種不好的做法。 當功能，樣式和標記保持獨立時，它使代碼更易於維護。 其次，您的<li>元素應嵌套在一對<ul>或<ol>標記內。

我編寫了一個jsFiddle示例，說明如何解決此任務：

http://jsfiddle.net/dLqja/1/

在此代碼中，我創建了一個“單擊”偵聽器，該偵聽器通過其ID附加到您的按鈕上。 按下按鈕后，它會觸發一個匿名回調函數，該函數會動態更改“ li”元素的顯示樣式。

包含jQuery

使以下內容成為您頁面中包含的第一個JavaScript。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

這個jQuery腳本由Google托管，它具有諸如以下優點（（使用它訪問以前的網站時，它可能已經緩存在客戶端瀏覽器中）。

您編寫的任何使用jQuery功能的JavaScript代碼都應包含在上述腳本之后。

沒有jQuery版本...

通過將事件偵聽器分配給按鈕，可以實現與上述類似的結果。 這種方法比使用onclick =“ ...”更可取，因為它堅持將功能與標記分開的規則。 如果這些答案均無效，則應檢查瀏覽器控制台中的錯誤消息。 http://jsfiddle.net/SvufY/1/

Answer 5

您應該避免使用內聯Javascript代碼，而應集中精力使其分開。 將事件處理程序附加到腳本標記（或更好的是，在文檔末尾加載的腳本文件）中的對象，如下所示：

<input id="clickButton" type="button" value="submit" />
    <ul>
        <li id="addQuestionChoices">roma</li>
    </ul>

<script>
    document.getElementById('clickButton').onclick = function() {
        document.getElementById('addQuestionChoices').style.display="block"
    };
</script>

您可以在http://jsfiddle.net/xxgdB/上看到一個有效的示例

另請注意，您可以在顯示字段中使用list-item或inherit來達到相同的效果。