document.querySelector не добавляет заголовок из изображения при нажатии - PullRequest
Новая
       7

document.querySelector не добавляет заголовок из изображения при нажатии

0 голосов
/ 09 января 2020

Я пытаюсь извлечь заголовок из другого элемента и опубликовать это значение внутри диапазона с классом .selected-swatch и изменить в зависимости от того, какой вариант выбора выбран, но я получаю сообщение об ошибке:

"Ошибка типа: document.querySelector (...) имеет значение null"

JS: 

<script>
var swatches = document.getElementsByClassName('form-option-swatch');

    for (var i=0; i < swatches.length; i++) {
        swatches[i].onclick = function(){
            console.log('yep');
            document.querySelector('.form-option-variant[title="' + this.title + '"]').click();
            document.querySelector('.selected-swatch').innerHTML = this.title;
        }
    };
</script>

HTML: 

<div class="productView-optionsGrid">
    <div data-product-option-change="" style="">
        <div class="form-field" data-product-attribute="swatch">
            <label class="form-label form-label--alternate form-label--inlineSmall">
                <strong>Design:</strong>
                <span class="selected-swatch" data-option-value=""></span>
            </label>
            <input class="form-radio" type="radio" name="attribute[115]" value="100" id="attribute_swatch_115_100" required="" data-state="false">
            <label class="form-option form-option-swatch" for="attribute_swatch_115_100" data-product-attribute-value="100">
                <span class="form-option-variant form-option-variant--pattern" title="Champion" style="background-image: url('https://cdn11.bigcommerce.com/s-oe8t2pkj6q/images/stencil/64x64/attribute_value_images/100.preview.jpg?t=1578332252');"></span>
                <span class="form-option-expanded">
                        <span class="form-option-image" style="background-image: url('https://cdn11.bigcommerce.com/s-oe8t2pkj6q/images/stencil/original/attribute_value_images/100.preview.jpg?t=1578332252');"></span>
                </span>
            </label>
            <input class="form-radio" type="radio" name="attribute[115]" value="1604" id="attribute_swatch_115_1604" required="" data-state="false">
            <label class="form-option form-option-swatch" for="attribute_swatch_115_1604" data-product-attribute-value="1604">
                <span class="form-option-variant form-option-variant--pattern" title="Drive" style="background-image: url('https://cdn11.bigcommerce.com/s-oe8t2pkj6q/images/stencil/64x64/attribute_value_images/1604.preview.jpg?t=1578332252');"></span>
                <span class="form-option-expanded">
                        <span class="form-option-image" style="background-image: url('https://cdn11.bigcommerce.com/s-oe8t2pkj6q/images/stencil/original/attribute_value_images/1604.preview.jpg?t=1578332252');"></span>
                </span>
            </label>
        </div>
    </div>
</div>
...