我有一個表格，表格結構html如下：
我有一個表格，表格結構html如下：
<tr>
<td>Quotation Category< span class="required" style="color: red">/span>*</td>/span>
<td>
<div class="form-group col-md-9">/span>
< select name="quotation_category" class="form-control" style="width: 80%;" id="quotation_category">
<option value=""/span>> Pilih Kategori</option>。
<option value="konvensional"/span>> Konvensional</option>。
<option value="syariah"/span>> Syariah</option>。
</select>/span>
</div>/span>
</td>/span>
<td class="ujroh-style"> Ujroh< span class="required" style="color: red">*</span>
</td>/span>
<td class="ujroh-style">/span>
<div class="form-group col-md-9"/span>>
< input type="number"/span> class="form-control" id="ujroh" name="ujroh">
</div>
</td> </tr>
下面是我的js:
document. querySelector('#quotation_category').addEventListener（'change', () => {
const select_value = document.querySelector（'#quotation_category'）.value
if (select_value === "konvensional" ) {
document.getElementsByClassName('.ujroh-style').style.display = "none"。
} else if (select_value === "syariah"/span>) {
document.getElementsByClassName('.ujroh-style').style.display = "revert"。
}
})
我想，如果我選擇'konvensional'，那選擇的選項Ujroh會出現。如果我選擇'syariah'，那么所選的Ujroh選項就會消失。如何做到這一點？
資訊Uncaught TypeError: 不能設定屬性of undefined (設定'display')
在HTMLSelectElement.<anonymous>
uj5u.com熱心網友回復：
這段線造成了錯誤
document.getElementsByClassName(' 。 ujroh-style').style.display = "some-value"。
你不需要在前面使用
。.，因為你已經在通過className進行選擇了你正在使用 getElements 注意
s它是復數的，如果這是你的意圖的話 你需要回圈瀏覽所有的元素，并改變元素上的顯示屬性，而不是陣列上的顯示屬性
const elems = Array. from(document.getElementsByClassName('ujroh-style'/span>)
elems.forEach(span class="hljs-params">el => el. style.display = 'your-value')
uj5u.com熱心網友回復：
三個問題：
style屬性，而一個元素集合沒有style屬性。只有單個元素有一個style屬性。值得慶幸的是，你可以遍歷每個元素.的字串，這將得到一個空集合。洗掉.revert不是一個有效的CSSdisplay屬性列舉。使用其他的東西因此，你以前的JavaScript代碼現在將是：
document. querySelector('#quotation_category').addEventListener（'change', () => {
const select_value = document.querySelector（'#quotation_category'）.value
if (select_value === "konvensional" ) {
for (const el of document.getElementsByClassName('ujroh-style') ) {
el.style.display = "none".
}
} else if (select_value === "syariah"/span>) {
for (const el of document.getElementsByClassName('ujroh-style') ) {
el.style.display = "inline-block"。
}
}
})
uj5u.com熱心網友回復：
一個問題是，你在getElementsByClassName選擇器中使用了'.classname'作為選擇器。其次，你試圖為一個元素集合添加一個樣式，這是不可能的。為了解決這個問題，你必須為集合中的每個元素添加顯示樣式。
document.querySelector('#quotation_category') 。 addEventListener('change', ( ) => {
const select_value = document.querySelector（'#quotation_category'）.value
if (select_value === "konvensional" ) {
document.querySelectorAll(' .ujroh-style')。 forEach(x => x。 style.display = 'none'）。)
} else if (select_value === "syariah") {
document.querySelectorAll(' .ujroh-style')。 forEach(x => x。 style.display = 'inline-block'）。)
}
})<table>/span>
<tr>/span>
<td>參考類別< span class="required" style="color: red">*</span>/span></td>
<td>
<div class="form-group col-md-9">/span>
< select name="quotation_category" class="form-control" style="width: 80%;" id="quotation_category">
<option value=""/span>> Pilih Kategori</option>。
<option value="konvensional"/span>> Konvensional</option>。
<option value="syariah"/span>> Syariah</option>。
</select>/span>
</div>/span>
</td>/span>
<td class="ujroh-style"> Ujroh< span class="required" style="color: red">*</span>
</td>/span>
<td class="ujroh-style">/span>
<div class="form-group col-md-9"/span>>
< input type="number"/span> class="form-control" id="ujroh" name="ujroh">
</div>
</td>/span>
</tr>/span>
</table>/span>轉載請註明出處，本文鏈接：https://www.uj5u.com/net/320426.html
標籤：