How can JScript pull from my SQL DB to save repeating my code?

Question

For my own reasons I am using JS in a seperate script, linked into my PHP file to perform several of nearly the same function (only the images change in each function) like this:

function Clicky1(element) {
    var XTag= element.parentElement.previousElementSibling.firstChild;
    if (element.src == "../image1.jpg") 
    {
        element.src = "../image2.jpg";
        XTag.innerHTML = XText;
        localStorage.setItem(XTag.id, XText);
    }
    else 
    {
        element.src = "../image1.jpg";
        XTag.innerHTML = "&nbsp;";
        localStorage.removeItem(XTag.id);
    }
}
function Clicky2(element) {
    var VTag= element.parentElement.previousElementSibling.firstChild;
    if (element.src == "../image3.jpg") 
    {
        element.src = "../image4.jpg";
        VTag.innerHTML = VText;
        localStorage.setItem(VTag.id, VText);
    }
    else 
    {
        element.src = "../image3.jpg";
        VTag.innerHTML = "&nbsp;";
        localStorage.removeItem(VTag.id);
    }
} //this repeats 3 more times

But what I want is to just use something like "{$myDB['images']}" as all the images that I am manually inserting links to within each function are already stored in my database. - How do I go about doing this in the simplest way?

you can't just inject PHP code into your Javascript like that. If the Javascript is in a <script> block within a .php file then you can inject the result of running some PHP code as hard-coded values into your script, but not if it's in a separate .js file, because it doesn't pass through the PHP script engine before being sent to the browser. — ADyson
– ADyson, Commented May 13, 2020 at 22:31
But this code is overly repetitive anyway - why not have the image paths as parameters to the function? Then you could only have one single re-usable function. Apart from those names, the code is identical in its functionality. And also if these functions are called from JavaScript within a .php file, then you could inject the image paths into it using PHP at that point. — ADyson
– ADyson, Commented May 13, 2020 at 22:33
Thanks for the idea, @ADyson, so when I shove the script into the PHP file, in a <script> block, will I be able to just use if (element.src == '{$myDB['images']}') ? where in 'images' of my DB, I have just image file paths such as '../image1.jpg' — Sn0wy0wl
– Sn0wy0wl, Commented May 13, 2020 at 22:44
yes. Although that still effectively hard-codes it into the Javascript, which means you end up still having to repeat what is otherwise the same function multiple times. — ADyson
– ADyson, Commented May 13, 2020 at 23:03
I was thinking you'd change the function to more like function Clicky(element, img1, img2) { var XTag= element.parentElement.previousElementSibling.firstChild; if (element.src == img1) { element.src = img2; XTag.innerHTML = XText; localStorage.setItem(XTag.id, XText); } else { element.src = img1; XTag.innerHTML = " "; localStorage.removeItem(XTag.id); } } — ADyson
– ADyson, Commented May 13, 2020 at 23:04

ADyson · Accepted Answer · 2020-05-13 23:39:30Z

You can't just inject PHP code into your Javascript like that. If the Javascript is in a block within a .php file then you can inject the result of running some PHP code as hard-coded values into your script, but not if it's in a separate .js file, because it doesn't pass through the PHP script engine before being sent to the browser.

But this code is overly repetitive anyway - why not have the image paths as parameters to the function? Then you could only have one single re-usable function. Apart from those names, the code is identical in its functionality. And also if these functions are called from JavaScript within a .php file, then you could inject the image paths into it using PHP at that point.

You'd change the function to more like this:

function Clicky(element, img1, img2) { 
  var XTag= element.parentElement.previousElementSibling.firstChild; 
  if (element.src == img1) { 
    element.src = img2; XTag.innerHTML = XText; 
    localStorage.setItem(XTag.id, XText); 
  } 
  else { 
    element.src = img1; 
    XTag.innerHTML = "&nbsp;"; 
    localStorage.removeItem(XTag.id); 
  } 
}

And then you could call it from a <script block embedded in a PHP file, something like this:

Clicky(someElement, "<?php echo $myDB['images']; ?>", "<?php echo $myDB['images1']; ?>");

(or whatever PHP you have to use to get to each separate image string). Then you can use the values from your PHP easily, and you also wouldn't need Clicky1, Clicky2, Clicky3 etc etc all with virtually-identical code in them.

Collectives™ on Stack Overflow

How can JScript pull from my SQL DB to save repeating my code?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related