Javascript document.getElementById не печатать на элемент - странный вопрос

Question

Этот контекст этой проблемы - это набор измерений, необходимых для просмотра пользователем. Я просматриваю часть своего кода и меняю его на классы начальной загрузки. У меня есть функция php - reviewSlide(); который распечатывает необходимый html. Оттуда он вызывает скрипт javascript - reviewGetMeasurement(); чтобы захватить измерения, вводимые пользователем.

Событие, которое вызывает яваскрипт функции является -

<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. Но я считаю, что у меня есть немного странная проблема в отношении кода таблицы

Любая помощь была бы признательна. Спасибо.

UPDATE и осветление (такой же, как комментарии):

Я не пишу это так медведь со мной, но да reviewSlide в PHP. Чтобы уточнить, у меня есть функция stepxx() в файле shortcodes.php. Каждый шаг представляет слайд и reviewSlide() также представляет собой другой слайд, в этом случае обзор слайд со всеми измерениями. Все это написано в html/php. В stepxx() есть тег кнопки, который вызывает функцию javascript slideforms_stepxx (event) ;. Когда каждый шаг завершен 1-xx, slidesforms_stepxx (событие) вызывается для проверки ввода.

Здесь мы придем к обзорному слайду. На слайде перед обзорным слайдом мы переходим в slideforms_step17, проверяем ввод и отправляем значения на сервер через jquery. Затем мы вводим функцию reviewGetMeasurement(), как показано выше, на <button onclick="slideforms_step17();reviewGetMeasurement();....>. Задача ReviewGetmeasurement состоит в том, чтобы распечатать значения, и это - то, где моя проблема.

Внутри reviewGetMeasurements(), если я распечатаю значение переменной, скажем, высоту через console.log (height), она будет работать, и я могу увидеть значение в консоли. Но однажды, если я попытаюсь распечатать значение our, сделав

document.getElementById("userHeight").innerHTML = height + "cm"; 

Я получаю null. Но я знаю, что есть высота значения, и она не равна нулю. ОДНАКО, если я поставлю код <table> сверху, он будет работать и значения будут распечатаны. Если я использую теги <p> с правильным идентификатором, это не сработает.

Answer 1

Вы не можете просто слепо поместить HTML внутри функции Javascript или PHP. Что в этих функциях должно быть подходящим типом кода, а не HTML.

Если это Javascript, то с помощью Javascript вы можете создавать элементы DOM, а затем вставлять их на страницу.

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

Если это PHP, запущенный в вызове Ajax, вы также можете использовать эхо, чтобы построить ответ на вызов 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>