Javascript function with variable doesnt work

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

Yep, what's the problem? What does "doesn't work" mean? Notice also, that img tag should not have ending tag. — Teemu
– Teemu, Commented Jun 16, 2014 at 9:40
what is coming in your 'bildpfad' variable in anzeigen function..Is it giving string value.. — K.K.Agarwal
– K.K.Agarwal, Commented Jun 16, 2014 at 9:43
The problem is that I cant call the function anzeigen(). So if I click on a picture it doesnt do the console.log — earny1989
– earny1989, Commented Jun 16, 2014 at 9:47
I strongly suggest you use JQuery to do this - onclick events hard coded into the HTML doc are not the way to do things. If you really need to do pure Javascript try using addEventListener instead. — vogomatix
– vogomatix, Commented Jun 16, 2014 at 9:48

K.K.Agarwal · Accepted Answer · 2014-06-16 09:57:33Z

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

edited Jun 16, 2014 at 9:57

answered Jun 16, 2014 at 9:49

K.K.Agarwal

8565 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

earny1989 Over a year ago

YES!! That´s it! Thank you

vogomatix · Accepted Answer · 2014-06-16 11:58:14Z

0

Typical German programming, never use one short word where 5 long ones will do. :-)

There is a lot of duplicated code (I've removed most but not all) and some of your code has 2 onclick events instead of just one, and in any event they should not really be in the code (see my earlier comment).

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

foreach($r as $bild) {
    $events = '';
    $bildpfad = $bild['Bilderpfad'];
    switch( $counterForBilderInReihe ) {
    case 0:
        echo '<tr>';
        $events = <<<EOF
onclick="anzeigen({$bildpfad})" 
onMouseOver="cursorChange({$counterForID})"
EOF;

        $counterForBilderInReihe++;
        break;
    case 1:
    case 2:
    case 3:
        $events = <<<EOF
onclick="anzeigen({$bildpfad})" onMouseOver="cursorChange({$counterForID})"
EOF;
        $counterForBilderInReihe++;
        break;
    default:
        echo '</tr>';
        $counterForBilderInReihe = 1;
        echo '<tr>';
        $events =<<<EOF
onMouseOver="cursorChange({$counterForID})" onclick="anzeigen({$bildpfad})"
EOF;
        break;
    }
    echo <<<EOF
   <td class="td">
     <img src="{$bildpfad}" alt="{$bild['Bildtitel']}" 
        class="GalerieBilder" id="{$counterForID}"
        {$events}>
      </img>
    </td>
EOF;
    $counterForID++;

}
if($counterForBilderInReihe === 0){
    echo '</tr>';
} else {

}
 echo '</table>';

edited Jun 16, 2014 at 11:58

answered Jun 16, 2014 at 10:10

vogomatix

5,1332 gold badges27 silver badges51 bronze badges

3 Comments

earny1989 Over a year ago

Yes you are right. And thank you for making me to notice that I have a duplicate onclick in

vogomatix Over a year ago

Finished editing - it is not complete but you should make an effort to cut down the amount of code you write. Part of the problem was that the code was more complicated than it needed to be.

earny1989 Over a year ago

Thank you. I will work on it to make simple code. The Problem is that I think in to complicated way. I dont know why :D But thank you :)

Collectives™ on Stack Overflow

Javascript function with variable doesnt work

2 Answers 2

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related