Цикл HTML-тега внутри другого тега

Question

У меня есть выборка и список div элементов, подобных этому:

<select name="select" id="select">
    <option value="a">a</option>
    <option value="b">b</option>
    <option value="c">c</option>
    <option value="d">d</option>
</select>
<button>submit</button>

<div id='list'>
    <div><h2>a</h2>0</div>
    <div><h2>b</h2>1</div>
    <div><h2>c</h2>2</div>
    <div><h2>d</h2>3</div>
    <div><h2>a</h2>0</div>
    <div><h2>b</h2>1</div>
    <div><h2>c</h2>2</div>
    <div><h2>d</h2>3</div>
</div>

Я хочу показать только div, в котором есть текст h2, соответствующий выбранному значению.

Я пытаюсь выполнить следующий цикл JavaScript:

<script>
    var select = document.getElementById('select');
    var divItems = document.querySelectorAll('#table div');
    var h2Items = document.querySelectorAll('#table div h2');
    var button = document.querySelector('button');

    button.addEventListener('click',function(){
        var selectValue = select.value;

        for(i=0; i < divItems.length; i++){
            var h2Text = h2Items[i].innerHTML;
            if (h2Text == selectValue){
                divItems[i].display='block';
            } else {
                divItems[i].display='none';
            }
        }

    });

Но это не работает. console.log показывает, что текст h2 и выбранное значение все правильные, но я не знаю, как управлять стилем div. Кто-нибудь может мне помочь? Спасибо.

Answer 1

Вам необходимо указать, что вы обновляете стиль.

divItems[i].display='block'; должно быть divItems[i].style.display='block';

И

divItems[i].display='none'; должно быть divItems[i].style.display='none';

Кроме того, вы нацеливаетесь на #table,но вы должны нацеливаться на #list, так как это идентификатор, установленный на вашем главном div.

Full JS:

<script>
    var select = document.getElementById('select');
    var divItems = document.querySelectorAll('#list div');
    var h2Items = document.querySelectorAll('#list div h2');
    var button = document.querySelector('button');

    button.addEventListener('click',function(){
        var selectValue = select.value;

        for(i=0; i < divItems.length; i++){
            var h2Text = h2Items[i].innerHTML;
            if (h2Text == selectValue){
                divItems[i].style.display='block';
            } else {
                divItems[i].style.display='none';
            }
        }

    });
</script>

Answer 2

Я изменил пару вещей, которые я объясню ниже, но сначала вот решение, которое работает как ожидалось:

const select = document.getElementById('select');
const divItems = document.querySelectorAll('#list div'); // this was #table 
const h2Items = document.querySelectorAll('#list div h2');
const button = document.querySelector('button');

button.addEventListener('click', function() {
    const selectValue = select.value;

    for(let i = 0; i < divItems.length; i++) {
        if (h2Items[i].innerHTML === selectValue){
            divItems[i].style = "display:block";
        } else {
            divItems[i].style = "display:none";
        }
    }
});

<select name="select" id="select">
    <option value="a">a</option>
    <option value="b">b</option>
    <option value="c">c</option>
    <option value="d">d</option>
</select>
<button>submit</button>

<div id="list">
    <div><h2>a</h2>0</div>
    <div><h2>b</h2>1</div>
    <div><h2>c</h2>2</div>
    <div><h2>d</h2>3</div>
    <div><h2>a</h2>0</div>
    <div><h2>b</h2>1</div>
    <div><h2>c</h2>2</div>
    <div><h2>d</h2>3</div>
</div>

Предложения:

1. Стоит проверить, как работает HTMLElement.style, найдите ссылку здесь .
2. Дополнительно изучите различия между var, let и const.
3. Последние, но не менее важные различия между == и ===.

Надеюсь, это поможет!