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/

在这段代码中，我创建了一个'click'监听器，它通过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来达到同样的效果。