javascript - js函数未定义

Question

我正在开发一个简单的显示和隐藏函数，它一直告诉我它没有定义。

这是 HTML:

<address>
<a id="windows" href="#" onclick="toggle();">
<img src="imges/c980e3f5-badf-432a-ae6c-9e5341d13462.png" alt="" />
</a>
</address>
         <p class="right_page">
           this is sample of the book container<br/>
           thats suppose to read from ajax
            </p>

这里是函数

    <script type="text/javasript">
function toggle() 
{
    var ele = document.getElementById("right_page");
    var text = document.getElementById("windows");
    if(ele.style.display == "block") {
            ele.style.display = "none";
        text.innerHTML = "show";
    }
    else {
        ele.style.display = "block";
        text.innerHTML = "hide";
    }
} 

</script> 

Answer 1

我认为这是由于您的 script 标记中的拼写错误造成的。将 type="text/javasript" 更改为 type="text/javascript"(缺少 c)。

更新

由于您将innerHtml 设置为字符串，您的图像将从 DOM 中删除。这会覆盖属于innerHtml 一部分的图像。

第一次运行toggle()时，display没有内联样式，因此ele.style.display将是一个空字符串。这意味着它将落入显示该段落的逻辑中。在后续调用中，该属性将具有一个值，因此它应该按照您的预期运行。