0

有人可以解释一下我在使用 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>
4

3 回答 3

1

newinner 被定义为一个类，并且您正在搜索一个 id 等于 newinner 的节点......而且您没有在您发布的代码中的任何地方调用 ShowDiv()

- 更新 -

我看到您自我最初回答以来已经更新了问题，但代码中仍然存在一些问题。

document.getElementsByClassName返回给定类的所有元素；它是一个类似数组的结构。所以通常你必须遍历每个元素；但在这种情况下，您可以使用 anid代替，然后使用该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。

于 2012-11-21T11:11:32.630 回答
1

您没有在页面中的任何位置调用该函数

于 2012-11-21T11:11:43.707 回答
0

如果你想使用 document.getElementById() 方法，那么给你的 DIV 一个 ID。

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

于 2012-11-21T11:22:53.360 回答