纯 JS - display:block 不工作

Question

我知道这个问题已经被问了一百万次了，但我发誓，我只检查了 20 个帖子，但没有任何效果...

这是我的代码：

当用户点击 "Email" 选项时，ID 为 "email" 的输入元素应显示在其下方。

HTML

<select>
    <option selected disabled>Contact me by:</option>
    <option onclick="showInput()">Email</option>
</select>
<input class="email" id="email" placeholder="Email address" type="text" />

JS

function showInput() {
    document.getElementById("email").style.display = "block";
}

CSS

input#email {
    display: none;
}

有人可以向我解释一下这是怎么回事吗？我在正文结束标记之前有一个 link 到 JS 文件。

Answer 1

display: none; 完全不是问题。您的代码不起作用，因为无法将 onclick 处理程序附加到 OPTION 元素。试试这个：

<select onchange="this.value === 'email' && showInput()">

表示"on selected option change check if email was selected and if it was, call showInput function".

顺便说一下，您应该将 value 属性添加到 OPTIONS。

See here.

Answer 2

使用 onChange 事件并将事件处理程序移动到 <select> 元素。还向 <option> 元素添加了 value 属性，以简化文本字段识别。最后，在函数中，将 select 元素传递给事件处理程序并从 select 列表中获取 selected 选项。

<select onChange="showInput(this)">
    <option selected disabled>Contact me by:</option>
    <option value="email">Email</option>
</select>
<input class="email" id="email" placeholder="Email address" type="text" />

<script>

function showInput(sel) {
    var opt = sel.options[sel.selectedIndex].value
    document.getElementById(opt).style.display = "block"
}

</script>

JSFiddle

现在您可以轻松添加更多联系人选项：

<select onChange="showInput(this)">
    <option selected disabled>Contact me by:</option>
    <option value="email">Email</option>
    <option value="phone">Phone</option>
    <option value="address">Mail</option>
</select>
<input class="email"   id="email"   placeholder="Email address"   type="text" />
<input class="phone"   id="phone"   placeholder="Phone number"    type="text" />
<input class="address" id="address" placeholder="Mailing address" type="text" />

纯 JS - display:block 不工作

Pure JS - display:block not working

html

javascript

css

block