PHP echo输出两段JavaScript getElementById命令仅单条生效如何解决

问题根因 #

你的现有写法不符合JS语法规范：document.getElementById('xxx').innerHTML = 是未完成的赋值语句，你提前闭合了<script>标签，浏览器解析时会将<script>标签后的所有相邻文本，都当作第一个未完成的innerHTML赋值的内容，因此第二段的Arr:直接拼接到了flightTime3元素的展示值中，第二段针对flightDate3的JS逻辑无法被正常识别执行。

正确实现方案 #

方案1：将赋值内容完整写在JS逻辑内（最推荐）

直接将要设置的文本作为字符串放到JS的赋值语句中，不要拆分到<script>标签外部，PHP输出时注意对引号做转义处理即可：

// 为flightTime3赋值
echo "<script type='text/javascript'>document.getElementById('flightTime3').innerHTML = 'Dep: ';</script>";
// 为flightDate3赋值
echo "<script type='text/javascript'>document.getElementById('flightDate3').innerHTML = 'Arr: ';</script>";

如果赋值内容包含单引号，可以用转义符处理，也可以把JS字符串用双引号包裹、在PHP层面转义双引号：

echo "<script type='text/javascript'>document.getElementById('flightTime3').innerHTML = \"Dep: 10:45\";</script>";

方案2：内容需脱离JS输出时的兼容方案

如果业务逻辑要求文本内容不能写在JS语句内，可以先把文本放入隐藏的独立DOM节点，再通过JS读取节点内容完成赋值：

<!-- 预先输出待使用的文本内容 -->
<span id="depText" style="display:none">Dep: </span>
<span id="arrText" style="display:none">Arr: </span>
<?php
// 执行批量赋值逻辑
echo "<script type='text/javascript'>
document.getElementById('flightTime3').innerHTML = document.getElementById('depText').innerText;
document.getElementById('flightDate3').innerHTML = document.getElementById('arrText').innerText;
</script>";
?>

内容的提问来源于stack exchange，提问作者JamieNesh