Ways to display the chosen selection post-selection of the option

Question

Ways to display the chosen selection post-selection of the option

My form has a table structure in HTML as shown below:

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

This is the javascript I have written:

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"
        }
    })

I need assistance with making it so that when 'konvensional' is selected, Ujroh option appears. And when 'syariah' is chosen, then the Ujroh option disappears. How can I achieve this?

NOTE
The code above is resulting in the following error:

Uncaught TypeError: Cannot set properties of undefined (setting 'display')
at HTMLSelectElement.<anonymous>

javascript html css dom

Answer 1

Answer №1

There are a few issues that need to be addressed:

You are attempting to retrieve the `style` property from a group of elements, but only individual elements have a `style` property. To fix this, you can loop through each element.
You are trying to select all elements with a specific class using a string with a period (`.`), which will result in an empty selection. Remove the period.
The `revert` value is not a valid CSS `display` property option. Try using a different value instead.

To correct your previous JavaScript code, it should now look like this:

document.querySelector('#quotation_category').addEventListener('change', () => {
    const selectValue = document.querySelector('#quotation_category').value;
    if (selectValue === "konvensional") {
        for (const el of document.getElementsByClassName('ujroh-style')) {
            el.style.display = "none";
        }
    } else if (selectValue === "syariah") {
        for (const el of document.getElementsByClassName('ujroh-style')) {
            el.style.display = "inline-block";
        }
    }
})

Answer 2

There are a few issues that need to be addressed:

You are attempting to retrieve the `style` property from a group of elements, but only individual elements have a `style` property. To fix this, you can loop through each element.
You are trying to select all elements with a specific class using a string with a period (`.`), which will result in an empty selection. Remove the period.
The `revert` value is not a valid CSS `display` property option. Try using a different value instead.

To correct your previous JavaScript code, it should now look like this:

document.querySelector('#quotation_category').addEventListener('change', () => {
    const selectValue = document.querySelector('#quotation_category').value;
    if (selectValue === "konvensional") {
        for (const el of document.getElementsByClassName('ujroh-style')) {
            el.style.display = "none";
        }
    } else if (selectValue === "syariah") {
        for (const el of document.getElementsByClassName('ujroh-style')) {
            el.style.display = "inline-block";
        }
    }
})

Answer 3

Answer №2

An issue is arising with this particular line

document.getElementsByClassName('.ujroh-style').style.display = "some-value"

Avoid using . at the beginning since you are already targeting by className
You used getElements, note the plural s. If that's your intention, you must iterate through each element and modify the display property of the element, not the array

const elems = Array.from(document.getElementsByClassName('ujroh-style'))
elems.forEach(el => el.style.display = 'your-value')

Answer 4

An issue is arising with this particular line

document.getElementsByClassName('.ujroh-style').style.display = "some-value"

Avoid using . at the beginning since you are already targeting by className
You used getElements, note the plural s. If that's your intention, you must iterate through each element and modify the display property of the element, not the array

const elems = Array.from(document.getElementsByClassName('ujroh-style'))
elems.forEach(el => el.style.display = 'your-value')

Ways to display the chosen selection post-selection of the option

Answer №1

Answer №2

Similar questions

Transform the Angular function into a factory and take advantage of caching

Execute JavaScript code when the selected values match

When I request the value of a JavaScript object, I am met with 'undefined'

Tips for managing Express.js callbacks and modifying an object's property from within a function

Navigating Maps in a PhoneGap iOS App

Exploring the Images directory

Centered inline-block divisions

Adjusting the size of images to seamlessly fit within a card in Bootstrap 5 without changing the dimensions of the card

Looping through required fields in jQuery based on a CSS class

Creating an interactive dropdown menu using uib-typeahead directive in AngularJS

Ways to stop a JS plugin affecting HTML anchors and preventing them from automatically scrolling to the top

jQuery grid view for checking the status as even or odd

TypeAhead.js and Bloodhound displaying an uneven quantity of search outcomes

The functionality of Angular UI TimePicker is not functioning as expected

Retrieve the values from several text fields, save them to a variable, and then transmit them to CodeIgniter

Is per-page localStorage the solution?

Ways to modify the focus hue of a react-bootstrap form input file?

Why isn't the front-end loading properly upon reloading, and instead displaying JSON data?

Attempting to submit a form containing multiple fields that share the same name as an array

Enhance the appearance of filters in datatables by applying custom classes