Can I inject php into my javascript file to inject into a php document?

Question

let a = "The Wolf Spider";
function setAction(){
 addEventListener("click", function() {
 document.querySelector(".crusher").style.visibility="hidden";
});
 
 addEventListener("click", function() {
 document.querySelector(".crusherDiv").style.visibility="hidden";
});
 
addEventListener("click", function() {
 document.querySelector(".readySetEverest").style.visibility="hidden";
});
addEventListener("click", function() {
 document.querySelector(".aboutUs").style.visibility="hidden";
}); 
 addEventListener("click", function() {
 document.querySelector(".gallery").style.visibility="hidden";
}); 
 addEventListener("click", function() {
 document.querySelector(".contactUs").style.visibility="hidden";
}); 
 
 addEventListener("click", function() {
 document.querySelector(".footer").style.visibility="hidden";
});

 addEventListener("click", function() {
 document.querySelector(".svgthree").style.visibility="hidden";
});
 
 addEventListener("click", function() {
  document.querySelector("aside").style.visibility="hidden";
});
 addEventListener("click", function() {
  document.querySelector("article").style.visibility="hidden";
});



addEventListener("click", function() {
document.querySelector("body").style.backgroundRepeat = "repeat-x";
});

addEventListener("click", function() {
document.querySelector("body").style.height ="1000px";
});

addEventListener("click", function() {
document.querySelector("body").style.width ="1000px";
});




addEventListener("click", function() {
document.querySelector("header").innerHTML=a;
});

addEventListener("click", function() {
document.querySelector("header").style.font = "200 35px/1.3 'Oleo Script', Helvetica, sans-serif";
});

addEventListener("click", function() {
document.querySelector("header").style.color = "#2b2b2b";
});

addEventListener("click", function() {
document.querySelector("header").style.textShadow = "4px 4px 0px rgba(0,0,0,0.1)";
});

addEventListener("click", function() {
document.querySelector("header").style.backgroundColor="white";
});



 addEventListener("click", function() {
document.querySelector(".logo").style.transform = "scale(.5)";
});

 addEventListener("click", function() {
document.querySelector(".logo").style.left="99%";
});
 
addEventListener("click", function() {
window.scrollTo(10, 10);
});
 
 
 var hyperLinkOne = document.createElement("a");
 hyperLinkOne.innerHTML = "";
 document.body.appendChild(hyperLinkOne);
 hyperLinkOne.setAttribute('href', 'spiderseteverest.php');
 hyperLinkOne.className="hyperOne";
 var b2c = document.createElement("BUTTON");
 b2c.innerHTML = "Back To Center Page";
 document.body.querySelector(".hyperOne").appendChild(b2c);
 b2c.className = "backToCenterPage";
 b2c.style.position="absolute";
 b2c.style.top = "25%";
 b2c.style.left= "75%";
 document.querySelector(".backToCenterPage").style.height="200px";
 document.querySelector(".backToCenterPage").style.width="200px";
 document.querySelector(".backToCenterPage").style.color="green";
 document.querySelector(".backToCenterPage").style.backgroundColor="black";
 
 
 

 var hyperLinkTwo = document.createElement("a");
 hyperLinkTwo.innerHTML = "";
 document.body.appendChild(hyperLinkTwo);
 hyperLinkTwo.setAttribute('href', 'simpleblog.php');
 hyperLinkTwo.className="hyperTwo";
 var randSpin = document.createElement("BUTTON");
 randSpin.innerHTML = "Random Spider";
 document.body.querySelector(".hyperTwo").appendChild(randSpin);
 randSpin.className = "RandomSpin";
 randSpin.style.position="absolute";
 randSpin.style.top = "55%";
 randSpin.style.left= "75%";
 document.querySelector(".RandomSpin").style.height="200px";
 document.querySelector(".RandomSpin").style.width="200px";
 document.querySelector(".RandomSpin").style.color="green";
 document.querySelector(".RandomSpin").style.backgroundColor="black";
 

 
 addEventListener("click", function() {
document.querySelector(".RandomSpin").style.font = "200 35px/1.3 'Oleo Script', Helvetica, sans-serif";
});

addEventListener("click", function() {
document.querySelector(".RandomSpin").style.color = "green";
});

addEventListener("click", function() {
document.querySelector(".RandomSpin").style.textShadow = "1px 2px 0px green";
});
 
 
 
 addEventListener("click", function() {
document.querySelector(".backToCenterPage").style.font = "200 35px/1.3 'Oleo Script', Helvetica, sans-serif";
});

addEventListener("click", function() {
document.querySelector(".backToCenterPage").style.color = "green";
});

addEventListener("click", function() {
document.querySelector(".backToCenterPage").style.textShadow = "1px 2px 0px green";
});
 
addEventListener("click", function() {
document.querySelector(".backToCenterPage").style.textShadow = "1px 2px 0px green";
}); 

}




//Spider Generator button//
function generateSpider(){
 document.querySelector(".article-feed").innerHTML = "7"; 
var randomSpiderButton01 = document.createElement("BUTTON");
randomSpiderButton01.innerHTML = "Next Spider";
document.body.querySelector(".article-feed").appendChild(randomSpiderButton01);
randomSpiderButton01.className = "randomSpiderButton01";
randomSpiderButton01.style.position="absolute";
randomSpiderButton01.style.top = "25%";
randomSpiderButton01.style.left= "75%";
 
 //create spider definition box//
 var RandomSpiderDefinition = document.createElement("div");
RandomSpiderDefinition.innerHTML = "9";
document.body.querySelector(".article").appendChild(RandomSpiderDefinition);
RandomSpiderDefinition.className = "RandomSpiderDefinition";
RandomSpiderDefinition.style.position="absolute";
RandomSpiderDefinition.style.top = "25%";
RandomSpiderDefinition.style.left= "75%";
 
 
 
 addEventListener("click", function() {
  var SpiderImageBox = document.createElement("img");
  document.body.querySelector(".article-feed").appendChild(SpiderImageBox);
  SpiderImageBox.className = "SpiderImageBox";
  SpiderImageBox.src = "";
  SpiderImageBox.alt = "hummmm";
  SpiderImageBox.style.position = "absolute";
  SpiderImageBox.style.top = "55%";
  SpiderImageBox.style.left="5%";})
  
 
 
}

.main{
 box-sizing: border-box;
 position: absolute;
 margin: 0px;
 border: 5px solid green;
 padding: 0px;
 height: 900px;
 width: 1200px;
 font-family: coniferous, sans-serif;
 font-style: normal;
 font-weight: 300; 
 background-repeat:no-repeat;
 


}

header{
 box-sizing: border-box;
 position: absolute;
 top: 200px;
 left: 230px;
 border: 3px solid green;
 padding: 0px;
 height: 200px;
 width: 600px;
 font-family: coniferous, sans-serif;
 font-style: normal;
 font-size: 70px;
 font-weight: 300; }
.SpiderClassification{position: absolute;
      top: 13%;
      left: 100%;}

aside{
 box-sizing: border-box;
 position: absolute;
 top: 200px;
 left: 10px;
 border: 5px solid green;
 padding: 0px;
 height: 600px;
 width: 200px;
 font-family: coniferous, sans-serif;
 font-style: normal;
 font-size: 2em;
 font-weight: 300; }
li{list-style-type: none;}
article{
 box-sizing: border-box;
 position: absolute;
 top: 400px;
 left: 250px;
 border: 3px solid green;
 padding: 0px;
 height: 400px;
 width: 560px;
 font-family: coniferous, sans-serif;
 font-style: normal;
 font-size: 30px;
 font-weight: 300; }

.article-feed{
 box-sizing: border-box;
 position: absolute;
 top: 0px;
 left: 0px;
 border: 3px solid green;
 padding: 0px;
 height: 200px;
 width: 280px;
 font-family: coniferous, sans-serif;
 font-style: normal;
 font-size: 30px;
 font-weight: 300; }


footer{
 box-sizing: border-box;
 position: absolute;
 top: 800px;
 left: 230px;
 border: 3px solid green;
 padding: 0px;
 height: 106px;
 width: 600px;
 font-family: coniferous, sans-serif;
 font-style: normal;
 font-size: 30px;
 font-weight: 300; }
/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
 .main{background-color: aliceblue}

}

/* Smartphones (landscape) ----------- */
@media only screen 
and (min-width : 321px) {
.main{background-color: antiquewhite}
}

/* Smartphones (portrait) ----------- */
@media only screen 
and (max-width : 320px) {
.main{background-color:aqua}
}

/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
.main{background-color: aquamarine}
}

/* iPads (landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
 .main{background-color: azure;}

}

/* iPads (portrait) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
 .main{background-color: beige;}
 
}

/* iPad 3 (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (-webkit-min-device-pixel-ratio : 2),
only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (min-resolution: 192dpi) { 
 
 .main{background-color: darkseagreen}

}

/* Desktops and laptops ----------- */
@media only screen 
and (min-width : 1224px) {
 .main{background-color: darkgoldenrod;}
 
}

/* Large screens ----------- */
@media only screen 
and (min-width : 1824px) {
 .main{background-color: darkred;}
}

/* Retina displays ----------- */
@media  only screen 
and (-webkit-min-device-pixel-ratio : 2), 
only screen 
and (min-resolution: 192dpi) {
 .main{background-color: firebrick}

}

<?php require_once('spiderseteverestconnect.php'); ?>

<?php 
    $query     = "SELECT spider, definition FROM wolf_spidertbl";
    $recordset = mysqli_query($con, $query) or die(mysql_error($con));
    $count     = mysqli_num_rows($recordset);  
?>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link href="../CSS/SimpleBlog.css" rel="stylesheet" type="text/css">
</head>

<body>
<!-- SITEMAP -->

<div class="main">
  <header class="header" style="color: green">Random Spider Archive Generator</header>
  <aside class="aside">
    <p style="text-align: center; color: green">Links</p>
    <ul style="list-style: square">
   <a style="text-decoration: none;" href="ReadySetEverestWebsite.php">
      <li>Readys Set Everest</li>
      </a>
  <br>
      <a style="text-decoration: none;" href="SpiderSetEverest.php">
      <li>Spider Set Everest</li>
      </a>
  <br>
  <a style = "text-decoration: none;"href="donationportal.php">
      <li>Donation Portal for Ready Set Everest</li></a>
  <br>
      <a style = "text-decoration: none;" href="https://66a8090b7e6cb64f2254b14c7f6a4d3a.blogspot.com">
      <li>Blogger for RSE.inc</li>
      </a>
    </ul>
  </aside>
  <article class="article">
    <section class="main-section">
      <section style="color: green" class="article-feed">
        <button onClick="generateSpider()">Practice</button>
      </section>
      <section class="SpiderClassification">
        <table class="table table-responsive">
          <thead>
            <tr>
              <th scope="col">#</th>
              <th scope="col">A</th>
              <th scope="col">B</th>
              <th scope="col">C</th>
            </tr>
          </thead>
          <tbody>
            whats up with this
            <tr>
              <th scope="row">2</th>
              <td id="a2">a2</td>
              <td id="b2">b2</td>
              <td id="c2">c2</td>
            </tr>
           
          </tbody>
        </table>
      </section>
    </section>
  </article>
  <footer style="color:green" class="footer">
    <nav>Site Map</nav>
  </footer>
</div>
<script type="text/javascript" src="../JavaScript/SimpleBlog.js"></script>

</body>
</html>
<?php 
    mysqli_free_result ($recordset);
    mysqli_close ($con);
?>

I would like to inject php code into the javascript document so that when I press the Practice button, i can bring in data from a database. Can I do this by putting php directly into the innerhtml for "randomspider definition" at the bottom of the javascript document? I tried to inject php directly but i received an error that it was correct javascript.

This question is worded a bit poorly. By any chance, are you asking how you can inject JavaScript into a PHP file? If so, use PHP opening and closing tags (e.g. ``) _within a ` — Raphael Rafatpanah, Dec 23 '19 at 23:10
Side note: `mysql_error()` doesn't work with the mysqli_ api. It's missing the "i". — Funk Forty Niner, Dec 23 '19 at 23:13
I would like to inject ----- ---- where the number 9 is showing up when the button is clicked — , Dec 23 '19 at 23:13
Can you define "inject" for us? Your question is unclear. Are you looking to cause an deliberate SQL injection or you want to modify a database so that it holds code inside it? Or, you mean you want to be able to use the PHP/MySQL with what you have now but in JS? — Funk Forty Niner, Dec 23 '19 at 23:15
I think the third, use php/mysql via javscript. If you look at the bottom of the javscript document where I have commented "random spider definition" I would like like to bring php into the document via javscript ---- tag.innerhtml = "PHP CODE" — , Dec 23 '19 at 23:19
so where the number 9 is, I would like to put php code instead — , Dec 23 '19 at 23:23
You can dump server/PHP data into a .php document like this: `` ([example code](https://ideone.com/Lhl0V3)) More JS code can now use that data however it pleases. If you want to use live server data without reloading or leaving the page, you need to use AJAX/fetch(). — , Dec 23 '19 at 23:46
@ChrisG, are you familiar with WebSockets? That would likely be a better choice for live server data IMO. Although, PHP does not support WebSockets, so another server side technology would have to be used (like Elixir) — Raphael Rafatpanah, Dec 23 '19 at 23:52
@RaphaelRafatpanah Yes, I'm familiar. I meant "live" only as opposed to data that is inserted when the page is loaded. — , Dec 23 '19 at 23:58

Raphael Rafatpanah · Accepted Answer · 2019-12-23T23:44:10.873

PHP outputs HTML5, and JavaScript is a part of HTML5.

So, it is possible to have <script> blocks that have PHP tags <?php and ?> inside of them.

Here is an example:

<html>
<head>
  <title>PHP embedded in JavaScript</title>
</head>
<body>
  <script>
    <?php echo "console.log(window)"; ?>
  </script>
</body>
</html>

As long as the above code is saved into a file that PHP can execute, then the browser will get the following code:

<html>
<head>
  <title>PHP embedded in JavaScript</title>
</head>
<body>
  <script>
    console.log(window)
  </script>
</body>
</html>

However, if that JavaScript lives in a separate file with a .js extension, then it won't work due to the fact that PHP doesn't know that it should execute that file. For example:

<html>
<head>
  <title>PHP embedded in JavaScript</title>
</head>
<body>
  <script src="path-to-some-javascript.js">
</body>
</html>

No matter what path-to-some-javascript.js contains, PHP won't know to execute that file. As a result, the browser will see weird syntax, and you'll get JavaScript syntax errors because the PHP wouldn't have been removed.

As @paulprogrammer points out, it's quite common to send an AJAX (or Fetch) HTTP Request for the data that your script needs.

For very small and simple applications, however, it's fine to just include everything in one PHP file. Then as things get a bit larger, it's also fine to separate out your code into separate PHP files that get included (see include and require).

That would look something like this:

app
├── js
│   ├── script-1.php
│   └── script-2.php
├── css
│   ├── styles-1.php
│   └── styles-2.php
└── index.php

Where index.php is:

<html>
<head>
  <title>PHP embedded in JavaScript</title>
  <style>
    <?php require './css/styles-1.php'; ?>
  </style>
  <style>
    <?php require './css/styles-2.php'; ?>
  </style>
</head>
<body>
  <script>
    <?php require './js/script-1.php'; ?>
  </script>
  <script>
    <?php require './js/script-2.php'; ?>
  </script>
  ...
</body>
</html>

and js/script-1.php could be:

console.log(window);
<?php echo "const four = 2 + 2"; ?>

etc.

I hope this clears things up as to why what you've expected to work hasn't, and how you may be able to get things working so that you can make incremental improvements.

Cheers

score -2 · Answer 2 · answered Dec 23 '19 at 23:05

No. Javascript runs in the browser. PHP runs on the server. It would be a security nightmare if the server allowed a client to inject code.

The traditional way to do something like this is to have multiple pages (or PHP that returns JSON as an AJAX call) that reacts to what the user inputs in a form (e.g. the Practice button etc).

Can I inject php into my javascript file to inject into a php document?

2 Answers2