Javascript document.getElementById не печатает на элемент — странная проблема
Этот контекст этой проблемы — это набор измерений, необходимых для просмотра пользователем. Я рассматриваю часть своего кода и заменяю его на классы начальной загрузки. У меня есть функция php — reviewSlide (); это распечатывает необходимый HTML. Оттуда он вызывает скрипт JavaScript — reviewGetMeasurement (); функция, чтобы захватить измерения пользовательского ввода.
Событие, которое запускает функцию JavaScript, —
<button onclick="slideforms_step17(event);reviewGetMeasurement();" class="mdk_slidesforms_btn"><?= (!empty($button_text)) ? $button_text : 'Next' ?></button>
Функция запускается, затем переходит в функцию ниже reviewSlide (), однако, если у меня есть следующий код, все работает отлично, и измерения собираются и печатаются на странице.
function reviewSlide() {
<table>
<tr width="33%">
<table class="pktsq_measurement_table_my_account_table">
<tr>
<td colspan="2" class="pktsq_measurement_table_my_account_td pktsq_measurement_table_my_account_td_title">
Personal
</td>
</tr>
<tr>
<td class="pktsq_measurement_table_my_account_td">
Height
</td>
<td class="pktsq_measurement_table_my_account_td pktsq_measurement_table_my_account_td_measurement" id="userHeight"></td>
</tr>
</table>
</tr>
</table>
...
}
Если я удаляю приведенную выше таблицу, ничего не работает.
я пытался
function reviewSlide() {
<p id="userHeight"></p>
<p id="userWeight"></p>
...
}
в верхней части моей функции (которая находится на данном этапе над таблицей), и ничего не подходит.
Я смотрел на проблемы других людей, некоторые из основных проблем заключались в том, что страница не загружалась, и вам пришлось бы ждать загрузки страницы, так как javascript не будет видеть html. Но я считаю, что у меня есть небольшая причудливая проблема с табличным кодом.
Любая помощь будет благодарна. Спасибо.
ОБНОВЛЕНИЕ и УТОЧНЕНИЕ (так же, как комментарии):
Я не писал это, так что терпите меня, но да, обзор Slide в php. Для пояснения у меня есть функция stepxx () в файле shortcodes.php. Каждый шаг представляет слайд, а reviewSlide () также представляет другой слайд, в данном случае обзорный слайд со всеми измерениями. Все это написано в html / php. В stepxx () есть тег кнопки, который вызывает функцию javascript slideforms_stepxx (событие) ;. Когда каждый шаг завершается 1-xx, slidesforms_stepxx (событие) вызывается для проверки ввода.
Вот где мы подходим к слайду обзора. На слайде перед слайдом с обзором мы идем в slideforms_step17, проверяем ввод и отправляем значения на сервер через jquery. Затем мы входим в функцию reviewGetMeasurement (), как показано выше: <button onclick="slideforms_step17();reviewGetMeasurement();....>, Задача ReviewGetmeasurement — распечатать значения, и в этом моя проблема.
Внутри reviewGetMeasurements (), если я распечатаю значение переменной, скажем, высоту через console.log (height), оно будет работать, и я смогу увидеть значение в консоли. Но однажды, если я попытаюсь напечатать значение нашего, делая
document.getElementById("userHeight").innerHTML = height + "cm";
Я получаю ноль. Но я знаю, что есть значение высоты, и оно не равно нулю. ОДНАКО если я поставлю <table> код сверху будет работать и значения будут распечатаны. Если я использую <p> теги с правильным идентификатором это не будет работать.
Решение
Вы не можете просто слепо поместить HTML-код в функцию Javascript или PHP. В этих функциях должен быть соответствующий код, а не HTML.
Если это Javascript, то с помощью Javascript вы можете создавать элементы DOM, а затем вставлять их на страницу.
Если это PHP работает во время рендеринга страницы на сервере, то вы можете использовать эхо PHP для вставки контента на страницу.
Если это PHP, выполняемый в вызове Ajax, то вы также можете использовать echo для создания ответа на вызов Ajax.
Вот пример вставки содержимого на страницу из пользовательского события с использованием функции Javascript:
function insertContent(html) {
var div = document.createElement("div");
div.innerHTML = html;
document.body.appendChild(div);
}
document.getElementById("run").addEventListener("click", function() {
insertContent(document.getElementById("newContent").value);
});<input id="newContent" value="Some Text"> <button id="run">Insert</button>Другие решения
Других решений пока нет …
detector