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

Posted 2023-05-07

【中文标题】Javascript document.getElementById 不打印到元素 - 奇怪的问题

【英文标题】：Javascript document.getElementById not printing to element - strange issue

【发布时间】：2016-02-29 01:13:33

【问题描述】：

此问题的上下文是用户需要查看的一组测量值。我正在审查我的一些代码并将其更改为引导程序的类。我有一个 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 >
            <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> 标签，它将无法正常工作。

【问题讨论】：

所以...reviewSlide() 函数在 PHP 中，对吗？你是什​​么意思“进入下面的功能”？我们可以假设reviewGetMeasurement() 函数（在 Javascript 中）依赖于在您的 PHP 函数reviewSlide() 中输出的类（和 ID）吗？如果是，则将这些类添加到新的 reviewSlide() 函数中，看看是否有效。

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

这是我们来到审查幻灯片的地方。在审查幻灯片之前的幻灯片上，我们进入 slideforms_step17 检查输入并通过 jquery 将值提交到服务器。然后我们通过

【参考方案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>

【讨论】：

你好 jfriend00。我理解您的沮丧，但请耐心等待，因为我刚刚修改了给我的内容。但是我没有将 javascript 和 php/html 混合在一起。虽然我混合了 php 和 html。我的背景不是网络编程，但是回显 html 代码行似乎比编写纯 html 并用

分解它要麻烦得多

@bigubosu - 老实说，我不知道你的问题中什么是 PHP，什么是 Javascript。看来您在reviewSlide() 中直接嵌入了 HTML，无论是 PHP 还是 Javascript，这都是非法的。请展示您的整个 PHP 文件，以便我们了解这里的实际情况。