Reputation: 3
For some reason, when passing a php variable to javascript using the following code.
JS:
var myVar = "<?php echo $pass ?>";
document.getElementById("output").innerHTML = myVar;
console.log(myVar);
And the PHP:
<?php
$myfile = fopen("testfile.txt", "r");
$pass = fread($myfile,filesize("testfile.txt"));
fclose($myfile);
?>
But instead of outputting the text in the file, "This is some text", it outputs the raw php code and not executing it: "
When looking at the p element in the Inspector, it is this:
<p id="output"><!--?php echo $pass;?--></p>
Upvotes: 2
Views: 97
Reputation: 2875
Welcome to a whole new world of fun. As all of the answers here have pointed out, php happens on the server side and javascript on the client side. When you open a page on your computer, a lot of the html is generated on the server, and then some stuff happens on your own computer (your browser interprets the css and runs javascript). That's server side and client side respectively.
You can use php to generate javascript, which is what slevy1 has so helpfully demonstrated. That can work wonders, but things can get tricky when you mix the two aforementioned sides (what if you want to reload the text from the server?).
Another path is to have javascript send a message to the server requesting information, and then act accordingly. I'm talking about AJAX. Here's the w3 tutorial explaining how to set that up:
https://www.w3schools.com/xml/ajax_intro.asp
It's made easier if you're using jquery:
http://api.jquery.com/jquery.ajax/
Either way it's not as intuitive as simply sticking some php into your javascript file, unless you're generating the javascript in php. Good luck with the project!
Upvotes: 0
Reputation: 3832
Here's how I manged to have the code successfully execute on my local box:
js_php.php contents:
<html>
<head><title></title></head>
<body>
<div id="output"></div>
<?php
$myfile = fopen("./text_file.txt", "r");
$pass = fread($myfile,filesize("text_file.txt"));
fclose($myfile);
?>
<script>
var myVar = "<?php echo $pass ?>";
document.getElementById("output").innerHTML = myVar;
console.log(myVar);
</script>
</body>
</html>
text_file.txt contents:
Just another textfile :)
Resulting HTML code for js_php.php:
<html>
<head><title></title></head>
<body>
<div id="output"></div>
<script>
var myVar = "Just another textfile :)";
document.getElementById("output").innerHTML = myVar;
console.log(myVar);
</script>
</body>
</html>
Even though the code works, there are cleaner and faster ways of passing data from PHP to JavaScript. The OP could have passed the data as part of a query string, as follows:
revised js_php.php
<?php
$myfile = fopen("./text_file.txt", "r");
$pass = fread($myfile,filesize("text_file.txt"));
fclose($myfile);
header("location: js_php.html?" . urlencode("qs=$pass"));
exit;
js_php.html:
<html>
<head><title></title></head>
<body>
<div id="output"></div>
<script>
var qs = location.search;
var data = decodeURIComponent( qs );
var split = data.split("=")[1];
split = split.replace(/\+/g," ");
document.getElementById("output").innerHTML = split;
console.log(data);
</script>
</body>
</html>
Note: Since PHP and JavaScript do not encode space characters the same way, the decoded JavaScript will have "+" characters that you need to replace with space characters. To do so, the regex will globally replace all of them in data.
Upvotes: 1
Reputation: 217
If you wanted to output the variable to the file you could do,
<?php
$myfile = fopen("testfile.txt", "r");
$pass = fread($myfile,filesize("testfile.txt"));
fclose($myfile);
$string = "var myVar = ".$pass.";
document.getElementById('output').innerHTML = myVar;
console.log(myVar);"
and then write $string
to the javascript file.
Upvotes: 0
Reputation: 4539
You cannot put PHP code into a javascript file that is run on the client's computer. PHP is interpreted on the server side, and generally speaking, only in .php files.
Upvotes: 3