Question

有人可以解释我在使用Javascript显示隐藏的DIV时出错的地方。我已经查看了之前的答案，但它们似乎没有起作用。

        .newinner
    {
        display: none;
        padding-left: 10px;
        padding-top: 10px;
        background: white;
        width: 905px;
        margin: auto;
        height: 400px;
    }
    </style>
    <script>
    function ShowDiv(newinner)
    {
        document.getElementsByClassName("newinner").style.display="block";
    }
    </script>

以下是DIV

    <button type="button" name="faddress" value="Show Div" onClick="showDiv('newinner')" />Find Address</button></div>
    <div class="newform">
    <div class="newinner">
    <form>
    <div class="formtitle"><b>To request this brochure please fill out the form below.</b></div>
    <div class="ntitle"><b>First Name*:</b><br><select>
      <option value="title">Title</option>
      <option value="mr">Mr</option>
      <option value="mrs">Mrs</option>
      <option value="miss">Miss</option>
      <option value="ms">Ms</option>
    </select>
    </div>
    <div class="fname">
    <input type="firstname" name="fname" /></div>
    <div class="lname"><b>Last Name:*</b><input type="lastname" name="lname" /></div>
    </form>
    </div>
    </div>

Answer 1

newinner被定义为一个类，并且您正在搜索id等于newinner的节点... 此外，您没有在发布的代码中的任何位置调用ShowDiv（）

- 更新 -

自从我的初步回答以来，我发现您已经更新了问题，但代码中仍然存在一些问题。

document.getElementsByClassName返回给定类的所有元素;它是一个类似阵列的结构。所以通常你要遍历每个元素;但在这种情况下，您可以改为使用id，然后使用document.getElementById方法，在找到时仅返回所选元素，否则返回null。

因此，您可以将showDiv重写为：

function ShowDiv (id) {
    document.getElementById(id).style.display = "block";
}

<button type="button" name="faddress" onClick="showDiv('newinner')">
    Find Address
</button>

<div id="newinner">
    ...
</div>

另请注意，使用onClick属性有助于快速原型设计或演示目的; 如果您要在生产中使用此代码，我建议您改为使用document.addEventListener。

Answer 2

您没有在页面的任何位置调用该功能

Answer 3

如果你想使用document.getElementById（）方法，那就给你的DIV一个ID。

只需将第2行从<div class="newinner">更改为<div class="newinner" id="newinner">

即可

有人可以解释为什么我的JavaScript无法正常工作吗？

3 个答案: