PHP中的Javascript布鲁斯：getElementById和getElementsByClassName

Question

This should be simple enough, alas it's giving me issues:

I have a PHP page that gives me up to three different iterations of td contents. The first is shown with display: table-cell, and the others are hidden with 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. ID strings akin to 'EV-F1' -- five characters, a number, a hyphen.

echo "<a onclick='loadLine(".$playerLine.")' href='javascript:void(0)'>".$playerLine."</a>";

The script hides all tds of the class gameLineCell, and displays the one whose link was clicked.

<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 tds is present, the first showing and the others hidden -- however my links do not work. I've tried removing the getElementsByClassName sequence, running only the getElementById, though to no avail. Nothing happens.

Any ideas?

Much obliged to any help,

Andrew

---

EDIT: Source of the error? Javascript is cutting my strings! EV-F1 becomes EV. Looking into the whys and how fix now.

Answer 1

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('<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 (i.e., the subtraction of EV and F1). To fix that, you need to encode the variable using JSON and then apply HTML escaping:

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')
);