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

Question

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

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

更新和澄清（与 cmets 相同）：

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

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

在 reviewGetMeasurements() 内部，如果我通过 console.log(height) 打印出变量的值，比如说高度，它将起作用，我可以在控制台中看到该值。但是有一次，如果我尝试通过这样做来打印我们的价值

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

我得到空值。但我知道有一个值高度，它不为空。但是，如果我从上面输入<table> 代码，它将起作用并打印出值。如果我使用带有正确 ID 的 <p> 标签，它将无法正常工作。

Answer 1

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

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

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

如果是 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>