php Generated html Button to run javascript

Question

What i would like to do is click the button and have it up date the background of another div. The buttons are generated with php from imgs in a file.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
    <title></title>
    <style>
        button{width: 100%; }
    </style>
</head>
<body>
    <div id="Navi" style="width: 150px; height: 640px;background: green;">
        <?php
            foreach (glob("*.png") as $filename) {
                echo "<button id='$filename' onclick='change(event);'>".substr($filename, 0, -4)."</button></br>";
           }
        ?>
    </div>
    <div id="ImgBig" style="height: 640px; width: 640px;margin-left: 150px; margin-top: -640px; background: blue;"></div>
    <script>
        function change(event){
            $("#ImgBig").css("background-image", "url("+event.target.id+")"); 
        }
    </script>
</body>

could you please define 'does not work' ? you have a few possible problems. - Image paths not specified correctly - background is not changed etc. Also could you please add a real array instead of glob("*.png") ? — Bizmate
– Bizmate, Commented Jan 23, 2016 at 16:00

Adib Aroui · Accepted Answer · 2016-01-23 16:05:19Z

1

Please try to change event to this in your php target so that your javascript function is applied to the current item:

<?php
            foreach (glob("*.png") as $filename) {
                echo "<button id='$filename' onclick='change(this);'>".substr($filename, 0, -4)."</button></br>";
           }
        ?>

then in your javascript change function, just remove target:

function change(event){
            $("#ImgBig").css("background-image", "url("+event.id+")"); 
        }

edited Jan 23, 2016 at 16:05

answered Jan 23, 2016 at 15:55

Adib Aroui

5,0656 gold badges45 silver badges95 bronze badges

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

3 Comments

Adib Aroui Over a year ago

Well, that was one of the issue now resolved. What does your debugging tools indicates to you?

tareoflight Over a year ago

the debugging tool don't give say anything is wrong

Adib Aroui Over a year ago

well, as for my answer, it is the main problem (just remove target), please to check this: jsfiddle.net/vhdhyjjb

Collectives™ on Stack Overflow

php Generated html Button to run javascript

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related