Javascript document.getElementById 不打印到元素 - 奇怪的问题

Question

这个问题的上下文是用户审查所需的一组度量。我正在审查我的一些代码并将其更改为 Bootstrap 的类。我有一个 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。但我相信我在这里有一个关于表格代码的古怪问题

任何帮助将不胜感激。谢谢。

更新和澄清(与评论相同):

这不是我写的，所以请耐心等待，但是是的，reviewSlide 是用 php 编写的。为了澄清，我在 shortcodes.php 文件中有一个函数 stepxx() 。每个步骤代表一张幻灯片，reviewSlide() 也代表另一张幻灯片，在本例中是包含所有测量值的审查幻灯片。所有这些都是用 html/php 编写的。在 stepxx() 中有一个按钮标记调用 javascript 函数 slideforms_stepxx(event);。当每个步骤完成 1-xx 时，调用 slidesforms_stepxx(event) 来检查输入。

这是我们来到审查幻灯片的地方。在审查幻灯片之前的幻灯片上，我们进入 slideforms_step17 检查输入并通过 jquery 将值提交到服务器。然后我们输入 reviewGetMeasurement() 函数，如上图所示 <button onclick="slideforms_step17();reviewGetMeasurement();....> . ReviewGetmeasurement 的任务是打印出这些值，这就是我的问题所在。

在 reviewGetMeasurements() 中，如果我通过 console.log(height) 打印出一个变量的值，比如高度，它会起作用，我可以在控制台中看到该值。但是一旦我尝试打印我们的值(value)

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

我得到空值。但我知道有一个值 height 并且它不为空。但是，如果我把 <table>上面的代码将起作用并且打印出值。如果我使用 <p>带有正确 ID 的标签将不起作用。

Answer 1

您不能只是盲目地将 HTML 放入 Javascript 或 PHP 函数中。这些函数中的内容必须是适当类型的代码，而不是 HTML。

如果它是 Javascript，那么使用 Javascript 您可以创建 DOM 元素，然后将它们插入到页面中。

如果它是在服务器上页面呈现时运行的 PHP，那么您可以使用 PHP 的 echo 将内容插入到页面中。

如果是在 Ajax 调用中运行的 PHP，那么您还可以使用 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>