Почему мой метод innerHTML не работает для перечисления вещей в моей контактной форме?

1

Я делаю программу, и мне интересно, почему все, что я вижу на моей странице html, это форма, но только сингл. где должен быть маркированный список для неупорядоченного списка. Я вводил пользовательский ввод в полях, но он не показывает мне данные в полях, как и предполагалось, когда я нажимаю кнопку "Отправить". Вот код.

function getFormElements() {
    var gather_form_elements = new Array(
        $("#first_name").val(), 
        $("#last_name").val(),
        $("email").val(), 
        $("#phone_number").val()
    );

    displayValues(gather_form_elements);
}

function displayValues(gather_form_elements) {

    for(i=0; i<gather_form_elements.length; i++)
    {
        document.getElementById("contact_info").innerHTML = "<li>" + gather_form_elements[i] + "</li>";
    }
}
  • 0
    Следует также отметить, что я использую этот jQuery, чтобы заставить кнопку вызывать первую функцию: $ (document) .ready (function () {$ ("button"). Click (function () {getFormElements ();} );});
Теги:
forms
innerhtml
html-lists

1 ответ

1

Потому что вы переоцениваете это на каждой итерации. Попытайтесь накапливать html перед использованием innerHTML следующим образом:

var html = "";
for(var i = 0; i < gather_form_elements.length; i++) {
    html += "<li>" + gather_form_elements[i] + "</li>";
//       ^^ the += is crucial. If you don't use it, it will just replace the content of html (the innerHTML in your code), we need to use += to append to html instead of overriding it.
}
document.getElementById("contact_info").innerHTML = html;

Вы можете получить тот же результат, используя только одну строку кода:

document.getElementById("contact_info").innerHTML =
    '<li>' + gather_form_elements.join('</li><li>') + '</li>';
Поделиться
  • 0
    Спасибо за комментарий. Похоже, он все еще делает то же самое. Глядя на ваш код, похоже, что все, что он делает, это создает переменную и присваивает ей новое значение на каждой итерации. Похоже, что он делает то же самое (переопределение) на каждой итерации.
  • 0
    @JustinRoohparvar Нет, это не одно и то же. В моей версии я использую += вместо = . Если вы замените = на += в вашем коде, это будет работать. Я только что накопил html перед использованием innerHTML чтобы мы не использовали его много раз и не вызывали накладных расходов. Это как я отмечаю в комментарии += имеет решающее значение.
Показать ещё 6 комментариев

Ещё вопросы

Сообщество Overcoder
Наверх
Меню