具有变量的Javascript函数不起作用

Question

I have a little Problem with PHP and JavaScript. I am making a homepage with a gallery and if you click on a picture(PHP get the src address from a database) it should become greater.

Here my code:

PHP:

    echo '<h1>'."Galerie".'</h1>';
                    $r = esql("SELECT * FROM Bilder");
                    $anzahlBilder = count($r);
                    $counterForBilderInReihe = 0;
                    $counterForID = 0;
                    echo '<table>';

                    foreach($r as $bild){
                       $bildpfad = $bild['Bilderpfad']; 
                       if($counterForBilderInReihe === 0){
                           echo '<tr>';
                           echo '<td class="td"><img src="'.$bild['Bilderpfad'].'" alt="'.$bild['Bildtitel'].'" class="GalerieBilder" onclick="anzeigen('.$bildpfad.')" onMouseOver="cursorChange('.$counterForID.')" id="'.$counterForID.'"></img></td>';
                           $counterForBilderInReihe = $counterForBilderInReihe + 1;
                       }
                       else if($counterForBilderInReihe === 1){
                           echo '<td class="td"><img src="'.$bild['Bilderpfad'].'" alt="'.$bild['Bildtitel'].'" class="GalerieBilder" onclick="anzeigen('.$bildpfad.')" onMouseOver="cursorChange('.$counterForID.')" onclick="anzeigen('.$bild['Bilderpfad'].')" id="'.$counterForID.'"></img></td>';
                           $counterForBilderInReihe = $counterForBilderInReihe + 1;
                       }else if($counterForBilderInReihe === 2){
                           echo '<td class="td"><img src="'.$bild['Bilderpfad'].'" alt="'.$bild['Bildtitel'].'" class="GalerieBilder" onMouseOver="cursorChange('.$counterForID.')" onclick="anzeigen('.$bildpfad.')" id="'.$counterForID.'"></img></td>';
                           $counterForBilderInReihe = $counterForBilderInReihe + 1;
                       }else if($counterForBilderInReihe === 3){
                           echo '<td class="td"><img src="'.$bild['Bilderpfad'].'" alt="'.$bild['Bildtitel'].'" class="GalerieBilder" onMouseOver="cursorChange('.$counterForID.')" onclick="anzeigen('.$bildpfad.')" id="'.$counterForID.'"></img></td>';
                           $counterForBilderInReihe = $counterForBilderInReihe + 1;
                       }else{
                           echo '</tr>';
                           $counterForBilderInReihe = 1;
                           echo '<tr>';
                           echo '<td class="td"><img src="'.$bild['Bilderpfad'].'" alt="'.$bild['Bildtitel'].'" class="GalerieBilder" onMouseOver="cursorChange('.$counterForID.')" onclick="anzeigen('.$bildpfad.')" id="'.$counterForID.'"></img></td>';
                       }
                       $counterForID = $counterForID + 1;
                   }
                   if($counterForBilderInReihe === 0){
                       echo '</tr>';
                   }else{

                   }
                   echo '</table>';

JavaScript:

    function cursorChange(id){
console.log("cursorchange!");
document.getElementById(id).style.cursor = "pointer";}


    function anzeigen(pfad){
console.log("anzeigen");
window.alert(pfad);}

My Problem here is that the function anzeigen(pfad) doesnt work but the function cursorChange(id) works fine. The Problem specificly is that if I click on a picture it doesnt call the function anzeigen(). I can see this because of the console.log(). And the variable pfad or $bildpfad is a string value. So what is the Problem?

Thanks for helping

Rene

Answer 1

Try this....

Use escape character for passing string value in javascript function call on click

echo '<td class="td"><img src="'.$bild['Bilderpfad'].'" alt="'.$bild['Bildtitel'].'" class="GalerieBilder" onclick="anzeigen(\''.$bildpfad.'\')" onMouseOver="cursorChange('.$counterForID.')" id="'.$counterForID.'"></img></td>';