純JS - 顯示：塊不工作

我知道這已被要求一百萬次，但我發誓，我只是檢查像20個職位，並沒有什麼作品...純JS - 顯示：塊不工作

這是我的代碼：

當一個用戶點擊「電子郵件」選項，輸入元素的ID爲「電子郵件」應顯示在它下面。

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" />

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

CSS

input#email { 
    display: none; 
}

有人能向我解釋如何這是不工作？我有一個鏈接到身體關閉標記之前的JS文件。

來源

2015-04-12 Neo

失蹤「此處的document.getElementById（」郵件「）塊;將style.display =」。 <---。這是一個錯字嗎？你有沒有嘗試過嗎？瀏覽器？ onclick事件可能無法在Firefox中使用，但在Chrome中 – baao

什麼不起作用？你的標題說'display：none'，但你的帖子是指「應該顯示」。 – helion3

我不認爲'

使用onChange事件並將事件處理程序移動到<select>元素。還爲<option>元素添加了value屬性，以使文本字段標識更簡單。最後，在函數中，將select元素傳遞給事件處理函數，並從選擇列表中獲取選定的選項。

<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" />

來源

2015-04-12 16:43:47 bloodyKnuckles

哇，太棒了！感謝您的回答。現在，我試圖找出如何隱藏一個元素，當另一個被選中。所以，如果我選擇「電子郵件」，然後點擊「電話」，電子郵件將隱藏。感謝芽！ – Neo

在將所選元素設置爲「block」之前，您可以一次將所有元素設置爲none。更新JSFiddle：http://jsfiddle.net/BloodyKnuckles/2f0jw0yn/1/ – bloodyKnuckles

哇！偉大的工作人！ – Neo

這根本不是display: none;的問題。您的代碼不起作用，因爲無法將onclick處理程序附加到OPTION元素。試試這個：

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

「如果選擇了電子郵件上選擇選項更改檢查，如果是，調用函數showInput」這意味着。

順便說一下，您應該將value屬性添加到OPTIONS。

See here。

來源

2015-04-12 16:42:47

Dzieki，Polak potrafi :) – Neo

純JS - 顯示：塊不工作

回答

相關問題