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> теги с правильным идентификатором это не будет работать.

1

Решение

Вы не можете просто слепо поместить 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>
2

Другие решения

Других решений пока нет …

По вопросам рекламы [email protected]