Блог

У меня есть небольшая проблема, которую я не смог решить, что бы я ни делал. Любой, кто знает о нотации видеофайлов, поймет, что я пытаюсь сделать намного проще, но я попытаюсь объяснить. У меня есть группа кнопок, которые показывают токен и пример текста, если используется указанный токен. Они могут быть изменены на значения по умолчанию, нижний или верхний регистр и / или слова разделены пробелом, точкой (точкой), подчеркиванием или тире. Для каждого есть элемент select.

Выбирает:

 <div class="grid" id="choosers">
    <div class="col no-margins full md-3 md-push-6">
        <div class="form-field">
            <div class="form-select small full-width">
                <select name="separators" id="separators">
                    <option value="0">Space ( )</option>
                    <option value="1">Dot (.)</option>
                    <option value="2">Underscore (_)</option>
                    <option value="3">Dash (-)</option>
                </select>
            </div>
        </div>
    </div>
    <div class="col no-margins full md-3">
        <div class="form-field">
            <div class="form-select small full-width">
                <select name="case" id="case">
                    <option value="0">Default Case</option>
                    <option value="1">Lower Case</option>
                    <option value="2">Upper Case</option>
                </select>
            </div>
        </div>
    </div>
</div>
 

Кнопки:

 <div class="col no-margins full md-6">
    <div class="form-field">
        <button type="button" class="naming small button">
            <span class="flexible token">{Quality Title}</span>
            <span class="flexible example">BluRay 1080p</span>
        </button>
    </div>
</div>
<div class="col no-margins full md-6">
    <div class="form-field">
        <button type="button" class="naming small button">
            <span class="flexible token">{Release Year}</span>
            <span class="flexible example">2017</span>
        </button>
    </div>
</div>
 

Всего 20 кнопок.
Итак, у меня есть объект javascript, чтобы упростить задачу, чтобы я мог импортировать его напрямую со всеми возможными результатами, разделить по разделителю, а затем регистру, и так далее:

 let naming = {
    space: {
        default: [
            {
                token: "{Quality Title}",
                example: "BluRay 1080p"
            },
            {
                token: "{Release Year}",
                example: "2017"
            }
        ],
        lower: [
            {
                token: "{quality title}",
                example: "bluray 1080p"
            },
            {
                token: "{release year}",
                example: "2017"
            }
        ],
        upper: [
            {
                token: "{QUALITY TITLE}",
                example: "BLURAY 1080P"
            },
            {
                token: "{RELEASE YEAR}",
                example: "2017"
            },
        ]
    }
};
 

etc, etc.

Then you have the javascript, with the call:

 document.getElementById('choosers', chooserEvents, false);
 

и затем функция:

 const chooserEvents = e => {
    e.preventDefault();
    if (e.target !== e.currentTarget) {
        let clicked = e.target;

        if (clicked.matches('#case') || clicked.matches('#separators')) {
            let case = document.getElementById('case'),
                seps = document.getElementById('separators'),
                caseVal = case.options[case.selectedIndex].value,
                sepVal = seps.options[seps.selectedIndex].value,
                flexibleTokens = document.querySelectorAll('.flexible.tokens'),
                flexibleExamples = document.querySelectorAll('.flexible.examples'),
                data;

            switch(true) {
                case sepVal == 0 amp;amp; caseVal == 0:
                    data = naming.space.default;
                break;
                case sepVal == 0 amp;amp; caseVal == 1:
                    data = naming.space.lower;
                break;
                case sepVal == 0 amp;amp; caseVal == 2:
                    data = naming.space.upper;
                break;
                case sepVal == 1 amp;amp; caseVal == 0:
                    data = naming.dot.default;
                break;
                case sepVal == 1 amp;amp; caseVal == 1:
                    data = naming.dot.lower;
                break;
                case sepVal == 1 amp;amp; caseVal == 2:
                    data = naming.dot.upper;
                break;
                case sepVal == 2 amp;amp; caseVal == 0:
                    data = naming.underscore.default;
                break;
                case sepVal == 2 amp;amp; caseVal == 1:
                    data = naming.underscore.lower;
                break;
                case sepVal == 2 amp;amp; caseVal == 2:
                    data = naming.underscore.upper;
                break;
                case sepVal == 3 amp;amp; caseVal == 0:
                    data = naming.dash.default;
                break;
                case sepVal == 3 amp;amp; caseVal == 1:
                    data = naming.dash.lower;
                break;
                case sepVal ==3 amp;amp; caseVal == 2:
                    data = naming.dash.upper;
                break;
            }

            let size = data.length;
            for (let i = 0; i <= size; i  ) {
                flexibleTokens[i].innerText = data[i].token;
                flexibleExamples[i].innerText = data[i].example;
            }
        }
    }
};
 

Итак, вам, вероятно, интересно, что не так, все кажется правильным, и это то, что я подумал, тем более, что это работает именно так, как я хотел. Но с этим кодом я получаю ошибку консоли: Uncaught TypeError: не удается прочитать свойство ‘token’ undefined. Поэтому я попытался закодировать его по-разному. Сначала я взял оператор for и вставил по одному в каждый случай переключения, чтобы строка обозначения объекта могла быть целой. Та же ошибка! Затем я выполнил 2 коротких оператора switch. Та же ошибка!
После долгих исследований я обнаружил, что веб-страница закорачивается с помощью amp;amp; . Я попробовал это, изменив код на:

 for (let i = 0; i <= size; i  ) {
    flexibleTokens[i].innerText = data[i] amp;amp; data[i].token;
    flexibleExamples[i].innerText = data[i] amp;amp; data[i].example;
}
 

Это сработало! Но вместо этого я получил ошибку консоли: Uncaught TypeError: не удается установить свойство ‘innerText’ undefined.

Что бы я ни делал, я получаю сообщение об ошибке, но код работает так, как ожидалось. Есть идеи, как это решить??