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


Javascript document.getElementById not printing to element - strange issue

这个问题的上下文是用户需要审查的一组测量。我正在审查我的一些代码,并将其更改为引导程序的类。我有一个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(事件)来检查输入。

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

在reviewGetMeasurements()中,如果我通过console.log(height)打印出一个变量的值,它会起作用,我可以在控制台中看到值。但有一次,如果我试图通过打印我们的价值

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

我变空了。但我知道有一个值高度,它不是空的。但是,如果我从上面放入<table>代码,它就会工作,并且值会打印出来。如果我使用具有正确id的<p>标记,它将不起作用。

不能盲目地将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>