Send PHP Array to Javascript and then select random images from array

Question

Here's my PHP code:

    <?php
        $all_images = glob("Images/Classes/{*.png, *.PNG}", GLOB_BRACE);
        echo json_encode($all_images);
        shuffle($all_images);
    ?>

And my Javascript code:

function Images(){
var i;
var z = Math.floor($('.Images').height() / 105); //Var z is the amount of images which fit in my div called .Images        
var images = JSON.parse( '<?php echo json_encode($all_images); ?>' ); //Get Array from PHP which contains all images in the folder.
for (i = 0; i < z; i++) {
    var a = document.createElement('a');
    var noextension = images[i].substring(0, images[i].lastIndexOf("."));
    var name = noextension.substring(noextension.lastIndexOf("/") + 1);
    var final = "/Wiki/" + name + ".php";
    a.setAttribute("href", final);
    var x = document.createElement('img');
    x.setAttribute("src", images[i]);
    x.setAttribute("alt", name);
    x.setAttribute("title", name);
    a.appendChild(x);
    document.getElementsByClassName('Images')[0].appendChild(a);
    }
};

I've finally made this program so it actually works, thanks to you guys, but I still have a problem. The problem is that the PHP Code pastes a line into the HTML code. But the PHP code shouldn't write anything. If as example I move the PHP code from the div Images to a different DIV, the array will pop up in that other div. So why is the PHP code writing something in the HTML code? And how can I prevent this? Error

EDIT: I fixed it by adding document.getElementsByClassName('Images')[0].innerHTML = ""; in javascript.

Answer 1

Try to include img inside anchor tag before. like this:

a.appendChild(x);

And then yours:

document.getElementsByClassName('Images')[0].appendChild(a);

If I've understood you right, and error description too, it can't find the needed element with your desired structure

Answer 2

Regular expression would make life much easier for you. Instead of using "replace", I would use something like this to gain full control of the strings passing through. The pattern can be enhanced — or made simpler ( https://regex101.com/ ). I hope this gives you an idea. Good luck!

 var str = "http://www.blastr.com/sites/blastr/files/Yoda-Meditating.jpg" var pattern = /([-^\\w+ _:]+)(\\.(jpe?g|gif|png){1,4})$/gi; var image = pattern.exec(str); var fullName = image[0]; //Yoda-Meditating.jpg var name = image[1]; //Yoda-Meditating var fullExtension = image[2];//.jpg var extension = image[3];//jpg