Tengo un formulario con estructura de tabla html como a continuación:
<tr> <td>Quotation Category<span class="required" style="color: red">*</td> <td> <div class="form-group col-md-9"> <select name="quotation_category" class="form-control" style="width: 80%;" id="quotation_category"> <option value="">Pilih Kategori</option> <option value="konvensional">Konvensional</option> <option value="syariah">Syariah</option> </select> </div> </td> <td class="ujroh-style">Ujroh<span class="required" style="color: red">*</span> </td> <td class="ujroh-style"> <div class="form-group col-md-9"> <input type="number" class="form-control" id="ujroh" name="ujroh"> </div> </td> </tr>A continuación se muestra mi 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") { document.getElementsByClassName('.ujroh-style').style.display = "revert" } })Quiero, si elijo 'konvensional', que aparezca esa opción seleccionada Ujroh. Si elijo 'syariah', la opción seleccionada Ujroh desaparece. ¿Como hacer eso?
INFORMACIÓN
Mi código da este error:
Uncaught TypeError: Cannot set properties of undefined (setting 'display') at HTMLSelectElement.<anonymous>Este trozo de línea está causando un error.
document.getElementsByClassName('.ujroh-style').style.display = "some-value" No necesitas usar . al frente porque ya está seleccionando por className
Está utilizando getElements, tenga en cuenta que s es plural si esa es su intención, necesita recorrer todos los elementos y cambiar la propiedad de visualización en el elemento, no en la matriz
const elems = Array.from(document.getElementsByClassName('ujroh-style')) elems.forEach(el => el.style.display = 'your-value')Tres problemas:
style de una colección de elementos, y una colección de elementos no tiene la propiedad de style . Solo un único elemento tiene una propiedad de estilo. Afortunadamente, puedes iterar a través de cada elemento. en él, lo que le dará una colección vacía. Retire el .revert no es una enumeración de propiedad display de CSS válida. usa otra cosaEntonces su código JavaScript anterior ahora sería:
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") { for (const el of document.getElementsByClassName('ujroh-style')) { el.style.display = "inline-block" } } })Un problema es que usa '.classname' como selector en el selector getElementsByClassName . Y segundo, está tratando de agregar un estilo a una colección de elementos, eso no es posible. Para solucionar esto, debe agregar el estilo de visualización a cada elemento de la colección.
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> <tr> <td>Quotation Category<span class="required" style="color: red">*</span></td> <td> <div class="form-group col-md-9"> <select name="quotation_category" class="form-control" style="width: 80%;" id="quotation_category"> <option value="">Pilih Kategori</option> <option value="konvensional">Konvensional</option> <option value="syariah">Syariah</option> </select> </div> </td> <td class="ujroh-style">Ujroh<span class="required" style="color: red">*</span> </td> <td class="ujroh-style"> <div class="form-group col-md-9"> <input type="number" class="form-control" id="ujroh" name="ujroh"> </div> </td> </tr> </table>