getElementByID работает, getElementsByClassName не работает

Question

Я работаю над решением, которое динамически добавляет выбранные поля ввода / раскрытия на страницу. Приведенный ниже пример кода работает, если я даю каждому входу select уникальный идентификатор и добавляю строку cod4e в скрипт с помощью getElementById(), но не работает, если я использую GetElementsByClassName().

Моя цель состоит в том, чтобы использовать один сценарий для заполнения поля ввода без необходимости назначать уникальный идентификатор для выбора входных данных и соответствующего кода для сценария.

    <select class="p1"></select>
    <select class="p1"></select>
    <select class="p1"></select>

    <script>
    var Date1 = "<option>" + new Date(new Date().getTime()+(1*24*60*60*1000)).toDateString() + "</option>";
    var Date2 = "<option>" + new Date(new Date().getTime()+(2*24*60*60*1000)).toDateString() + "</option>";
    var Date3 = "<option>" + new Date(new Date().getTime()+(3*24*60*60*1000)).toDateString() + "</option>";
    var Date4 = "<option>" + new Date(new Date().getTime()+(4*24*60*60*1000)).toDateString() + "</option>";
    var Date5 = "<option>" + new Date(new Date().getTime()+(5*24*60*60*1000)).toDateString() + "</option>";
    var Date = Date1 + Date2 + Date3 + Date4 + Date5

    document.getElementsByClassName("p1").innerHTML = Date;
    </script>

Answer 1

getElementsByClassName() Функция (обратите внимание на "Элементы") возвращает NodeList, а не один узел. Вы должны перебрать список, чтобы работать с каждым узлом в отдельности.

Вы можете сделать это с помощью простого for цикл:

var selects = document.getElementsByClassName("p1");
for (var i = 0; i < selects.length; ++i)
  selects[i].innerHTML = Date;

Я сильно подозреваю, что у вашего кода есть другая проблема: вы создаете глобальную переменную с именем "Date", и это приведет к засорению привязки конструктора JavaScript "Date". Используйте другое имя (например, строчную букву "дата").