Js，php，onclick函数和引号错误

Question

I'm setting up a fantasy soccer website and I'm having troubles with quotes and javascript.

I have one table of player names and a set of 18 <div> (11 starting players and 7 bench ones) on a soccer field image. I want the user to be able to click on a name on the table, and the name simultaneously appears on the field and disappears from the table. The player name must appear at the first "empty" position (either starting or bench). On the other side, if the user click on a <div>, the name must disappear from the field/bench and appear in the table at the original position.

It's way more easy to see than to explain! :)

I was able to do that but I'm getting mad once I found out there were players with ' in their names...

I have the following piece of code with an array for taking care of the 18 position (var team) and two functions

<script>
    team = new Array(1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0);

    function insertPlayer(name)
    {
        var j = 0;
        for (j=0; j<18; j++) {
            if(team[j] == 0){
                break;
            }
        };
        if(j<18){
            team[j] = 1;
            var num = j.toString();
            var id_string = 'player_'.concat(num);
            document.getElementById(j).textContent = name;
            document.getElementById(id_string).value = name;
            document.getElementById(name).style.display = 'none';
        }
    }

    function removePlayer(id)
    {
        team[id] = 0;
        var num = id.toString();
        var id_string = 'player_'.concat(num);
        document.getElementById(document.getElementById(id).textContent).style.display = "";
        document.getElementById(id).textContent = "";
        document.getElementById(id_string).value = "";
    }
</script>

The <div> are like this one

<?php
    for ($i=0; $i < 18; $i++) { 
      echo '<div onclick="removePlayer(\''.$i.'\')" id="'.$i.'">';
      if(isset($array[$i])){echo $array[$i];}
      echo '<input type="hidden" id="player_'.$i.'" name="player_'.$i.'" value=';
      if(isset($array[$i])){echo '"'.$array[$i].'"';}
      echo '></div>';
    }
?>

where, of course, $array[$i] is the saved lineup, if the user has already done it and he wants to modify his first choice. The table is like this one:

<tr id="'.mysqli_real_escape_string($link,$name).'">
...
<td>...</td>
<td onclick=\"insertPlayer('".mysqli_real_escape_string($link,$name)."')\">".$name."</td>
<td>...</td>
...

As I said, this works great with normal names. It gives me troubles with name like "O'Neal" for example...

Thanks for your help!

Answer 1

Put the player names into a Javascript array, and then use the array index in the function call.

<script>
    team = new Array(1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0,0);
    var players = <?php echo json_encode($array); ?>;

    function insertPlayer(playernum)
    {
        var name = players[playernum];
        var j = 0;
        for (j=0; j<18; j++) {
            if(team[j] == 0){
                break;
            }
        };
        if(j<18){
            team[j] = 1;
            var num = j.toString();
            var id_string = 'player_'.concat(num);
            document.getElementById(j).textContent = name;
            document.getElementById(id_string).value = name;
            document.getElementById(name).style.display = 'none';
        }
    }

    function removePlayer(id)
    {
        team[id] = 0;
        var num = id.toString();
        var id_string = 'player_'.concat(num);
        document.getElementById(document.getElementById(id).textContent).style.display = "";
        document.getElementById(id).textContent = "";
        document.getElementById(id_string).value = "";
    }
</script>

...

<tr id="player_insert_'.$i.'">
...
<td>...</td>
<td onclick=\"insertPlayer('.$i.')\">".$name."</td>
<td>...</td>
...