using php in js function (external .js file)

Question

I have a jakosc-powietrza.js file containing functions like this:

var combo1 = document.getElementById('S0_Data');
function test() {
    var dzien = combo1.value.trim();
    alert("Wybrano " + dzien);
 };
function render_test() {
    var test1 = <?php echo x; ?>;

    var chart = new CanvasJS.Chart("chartContainer", {
            theme: "light2",
            animationEnabled: true,
            title: {
                text: "Pomiar parametrÃ³w powietrza",
                fontSize: 25
                    },
            axisX: {
                title: "Czas",
                titleFontSize: 15,
                labelAngle: -90,
                intervalType: "hour",
                interval:55
                   },
            axisY: {
                title: "oC/%",
                titleFontSize: 15
                   },
            axisY2: {
                title: "ppm/ppb",
                titleFontSize: 15
                   },
            data: [
                  {
                type: "line",
                color: "red",
                name: "Temperatura",
                showInLegend: true,
                dataPoints: <?php echo json_encode($data_points, JSON_NUMERIC_CHECK); ?>
                  },
                  {
                type: "line",
                color: "green",
                name: "WilgotnoÅ›Ä‡",
                showInLegend: true,
                dataPoints: <?php echo json_encode($data_points2, JSON_NUMERIC_CHECK); ?>
                  },
                  {
                type: "line",
                color: "blue",
                name: "eCO2",
                axisYType: "secondary",
                showInLegend: true,
                dataPoints: <?php echo json_encode($data_points3, JSON_NUMERIC_CHECK); ?>
                  },
                  {
                type: "line",
                color: "yellow",
                name: "TVOC",
                axisYType: "secondary",
                showInLegend: true,
                dataPoints: <?php echo json_encode($data_points4, JSON_NUMERIC_CHECK); ?>
                  }
                  ]
        });
        chart.render();
};
combo1.addEventListener('change', render_test, false);

I include it into test.php file like this:

<script type="text/javascript" src="js/jakosc-powietrza.js"></script>

When I open test.php file using browser I got the following error in web console:

SyntaxError: expected expression, got '<'

...and it points to this:

var test1 = <?php echo x; ?>;

Any pointers what I am doing wrong?

PHP Runs on the server, and the way you are placing that script in the page it is never being loooked at on the server — RiggsFolly
– RiggsFolly, Commented Mar 6, 2020 at 16:21
I up-voted your question as it it clearly written. But it sounds like you really need to start with some introductory reading on web development so that you understand the difference between client side and server side code. — nixon
– nixon, Commented Mar 6, 2020 at 20:48

David · Accepted Answer · 2020-03-06 16:23:58Z

2

It's possible to have PHP parse/interpret your .js files just like it does with .php files, but it's generally a bad idea. (And certainly no PHP installation would do it by default.)

Instead, put the value you want in your .php file before your external JavaScript executes, and just reference it in your external JavaScript. For example:

<script type="text/javascript">
    var test1 = <?php echo x; ?>;
</script>
<script type="text/javascript" src="js/jakosc-powietrza.js"></script>

As the complexity grows there are various ways to manage scope, treating the dynamic value(s) as a dependency to be injected into an otherwise self-contained (unit testable) JavaScript module. But the premise remains the same.

answered Mar 6, 2020 at 16:23

David

221k42 gold badges245 silver badges337 bronze badges

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

Collectives™ on Stack Overflow

using php in js function (external .js file)

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