[英]Javascript blues in PHP: getElementById & getElementsByClassName
This should be simple enough, alas it's giving me issues: 这应该很简单,a,这给了我一些问题:
I have a PHP page that gives me up to three different iterations of td
contents. 我有一个PHP页面,可以给我最多三种不同的
td
内容迭代。 The first is shown with display: table-cell
, and the others are hidden with display: none
. 第一个显示为
display: table-cell
,其他display: none
。
echo '<td style="display: table-cell" class="gameLineCell" id="'.$playerLine.'" colspan="3">';
& &
echo '<td style="display: none" class="gameLineCell" id="'.$playerLine.'" colspan="3">';
I then have a link corresponding to each td
option -- clicking it is supposed to run a function loadLine
into which I pass a string that corresponds to the td
ID. 然后,我有一个与每个
td
选项相对应的链接-单击它应该运行一个loadLine
函数,在其中传递一个与td
ID相对应的字符串。 ID strings akin to 'EV-F1' -- five characters, a number, a hyphen. 类似于“ EV-F1”的ID字符串-五个字符,一个数字和一个连字符。
echo "<a onclick='loadLine(".$playerLine.")' href='javascript:void(0)'>".$playerLine."</a>";
The script hides all td
s of the class gameLineCell
, and displays the one whose link was clicked. 该脚本隐藏了
gameLineCell
类的所有td
,并显示其链接被单击的td
。
<script>
function loadLine(line) {
var lines = document.getElementsByClassName('gameLineCell');
for (var i = 0; i < lines.length; i++) {
lines[i].style.display = 'none';
}
document.getElementById(line).style.display = 'table-cell';
}
</script>
When I view the source of my PHP page everything renders properly -- my links show the proper strings in the loadLine
brackets, each of my td
s is present, the first showing and the others hidden -- however my links do not work. 当我查看PHP页面的源代码时,所有内容均正确呈现-我的链接在
loadLine
括号中显示了正确的字符串,每个td
都存在,第一个显示,而其他隐藏了-但是我的链接不起作用。 I've tried removing the getElementsByClassName
sequence, running only the getElementById
, though to no avail. 我尝试删除
getElementsByClassName
序列,仅运行getElementById
,尽管无济于事。 Nothing happens. 什么都没发生。
Any ideas? 有任何想法吗?
Much obliged to any help, 非常有帮助,
Andrew 安德鲁
EDIT : Source of the error? 编辑 :错误的来源? Javascript is cutting my strings!
Javascript让我望而却步! EV-F1 becomes EV.
EV-F1变为EV。 Looking into the whys and how fix now.
寻找原因以及如何立即修复。
You have a typo on the code you show. 您在显示的代码上有错字。 There is an extra
)
here 有一个额外的
)
在这里
for (var i = 0; i < lines.length); i++)
it should be 它应该是
for (var i = 0; i < lines.length; i++)
There are a few issues here related to proper escaping and enclosure of strings; 这里有一些与正确转义和包围字符串有关的问题; I personally use
printf()
to print HTML, this is what it would look like: 我个人使用
printf()
来打印HTML,如下所示:
printf('<td style="display: table-cell" class="gameLineCell" id="%s" colspan="3">',
htmlspecialchars($playerLine, ENT_QUOTES, 'UTF-8');
);
This piece of code in particular is tricky: 这段代码特别棘手:
echo "<a onclick='loadLine(".$playerLine.")' href='javascript:void(0)'>".$playerLine."</a>";
The problem is that $playerLine
doesn't contain JavaScript string enclosures and so it would attempt to resolve EV-F1
into EV - F1
(ie, the subtraction of EV
and F1
). 问题在于
$playerLine
不包含JavaScript字符串附件,因此它将尝试将EV-F1
解析为EV - F1
(即EV
和F1
的减法)。 To fix that, you need to encode the variable using JSON and then apply HTML escaping: 要解决此问题,您需要使用JSON对变量进行编码,然后应用HTML转义:
printf('<a onclick="loadLine(%s)" href="javascript:void(0)">%s</a>',
htmlspecialchars(json_encode($playerLine), ENT_QUOTES, 'UTF-8'),
htmlspecialchars($playerLine), ENT_QUOTES, 'UTF-8')
);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.