Updated Fiddle

Question

我试图更多地展示节目＆amp;显示较少。执行此代码时，我得到错误＆＃34;显示内容未定义＆＃34;无法接受。我错过了什么？

<script type="text/javascript" language="JavaScript">
    function HideContent(hide) {
        document.getElementById("hide").style.display = "none";
    }
    function ShowContent(show) {
        document.getElementById("hide").style.display = "list-item";
    }
    function ReverseDisplay(hide) {
        if (document.getElementById("hide").style.display == "none") { document.getElementById(d).style.display = "block"; }
        else { document.getElementById(d).style.display = "none"; }
    }
    </script>

    heading<br/>
    <a href="javascript:ShowContent(show)" >
    Show
     </a>
    <div id="hide" style="display:none;">
    <p>content goes here</p>
    <a href="javascript:HideContent(hide)">
    hide
    </a>
    </div>

Answer 1

您不应该使用内联JavaScript，因为随着代码的扩展，它变得越来越难以维护。相反，您应该使用DOM API方法来选择元素并使用.addEventListener方法来分配事件侦听器函数。

但是，您收到此错误的原因是因为您在JavaScript中使用了尚未定义的变量。这会导致错误并停止脚本，这意味着ShowContent和HideContent不会被初始化，因此当您尝试使用这些功能时，它们将不会存在，从而引发错误。

＆＃13;

var hidd = document.getElementById("hidden");
var hide = document.getElementById("hide");
var show = document.getElementById("show");

show.addEventListener('click', function(){
    hidd.style.display = '';
    show.style.display = 'none';
}, false);

hide.addEventListener('click', function(){
    hidd.style.display = 'none';
    show.style.display = '';
}, false);

＆＃13;

<a id="show" href="#">Show</a>
<div id="hidden" style="display:none;">
    <a id="hide" href="#">hide</a>
    <p>content goes here</p>
</div>

＆＃13;

Answer 2

您传递给函数show和hide的变量未定义。此外，onclick更适合运行JavaScript。

<a href="#" onclick="ShowContent()" >

Updated Fiddle

我不建议使用内联代码，并将所有内容都放在脚本标记中

<script>
    window.onload = function () {
        document.querySelector('#showContent').onclick = function () {
            ShowContent();
        }
    };
</script>

<a id="showContent" href="#">Show</a>

显示未定义的内容

2 个答案:

Updated Fiddle