Блог

Главная - Вопросы по программированию - Заполнение параметров выбора заданным временем с использованием массивов JavaScript?

Заполнение параметров выбора заданным временем с использованием массивов JavaScript?

#javascript

#javascript

Вопрос:

Я думаю, что это может иметь простое решение, но я не уверен, куда с ним идти. Я пытаюсь заполнить a <select> динамически добавляемыми параметрами из массива JavaScript (поскольку мой HTML выглядел действительно беспорядочно).

Я искал в Интернете и видел, как кто-то предположил, что это можно сделать так, как я пробовал, но это не работает (и не выдает ошибок), но в основном я нашел только решения, которые не используют жестко запрограммированный массив, вместо этого используя функцию для нахождения определенного времени с интервалами (которые яне нужно для этой задачи).

Я думаю, что мне нужно преобразовать время, но я не смог найти ничего в Интернете, чтобы сказать мне, принимают ли массивы время в качестве входных данных. Я плохо спал несколько дней, поэтому прошу прощения, если это явно очевидное решение. Вот что у меня есть на данный момент… (мои параметры закомментированы в моем файле)

https://codepen.io/caitlinmooneyx/pen/LYRpEOv

 function populateTimes() {

    let startTimes = document.getElementById('stime');

    let times = ['9:00', '9:30', '10:00', '10:30', '11:00', '11:30','12:00','12:30', '13:00', '13:30', '14:00', '14:30', '15:00'];

    console.log(stime);
    startTimes.addEventListener('click', () => {
        let options = times.map(time => `<option value="${time}">${time}</option>`).join('n');

        startTimes.innerHTML = options;
    });
} 
   <select name="stime" onclick="populateTimes()" id="stime" required>                            
                            <option value="" selected disabled hidden>Choose a time</option>
             <!--
                            <option value="nine">9:00</option>
                            <option value="hnine">9:30</option>
                            <option value="ten">10:00</option>
                            <option value="hten">10:30</option>
                            <option value="eleven">11:00</option>
                            <option value="heleven">11:30</option>
                            <option value="twelve">12:00</option>
                            <option value="htwelve">12:30</option>
                            <option value="one">13:00</option>
                            <option value="hone">13:30</option>
                            <option value="two">14:00</option>
                            <option value="htwo">14:30</option>
                            <option value="three">15:00</option>
-->
                        </select>

Комментарии:

1. document.getElementById('stime').value; <= вы получаете значение и пытаетесь обработать его как элемент позже. .value Отключите.

2. Вам также необходимо делать это при загрузке документа, а не когда пользователь нажимает на элемент выбора.

3. Ага! Я просто посмотрел на это, задаваясь вопросом, была ли это проблема. По крайней мере, простое исправление, спасибо @Taplar

4. Обратите внимание, что сообщение об ошибке select.addEventListener is not a function , которое выдает ваш код, означает, что вы должны использовать console.log(select) прямо перед рассматриваемой строкой для отладки этого.

5. В вашем codepen нет события onload, просто функция, которая не вызывается. Параметры по-прежнему добавляются onclick, что в Firefox предотвращает выбор чего-либо, кроме первого варианта. Рабочая версия: codepen.io/khrismuc/pen/PoGPwdG (скрипт вставляется в конец <body>, поэтому событие загрузки не требуется)

Метки: