Put php in js page

Question

I would like to put a jQuery function which contain php in my main.js page. How can I do ?

<script type="text/javascript">

    var r = parseInt('<?php the_field('red'); ?>'); 
    var g = parseInt('<?php the_field('green'); ?>'); 
    var b = parseInt('<?php the_field('blue'); ?>');


    $("body").css('background-color', 'rgb(' + r + ',' + g + ',' + b + ')');

        var alpha = Math.min($(this).scrollTop() / 2000, 1);
        var r = Math.round((230-parseInt('<?php the_field('red'); ?>')) * alpha + parseInt('<?php the_field('red'); ?>')); 
        /* red : (fin - début + début) */
        var g = Math.round((230-parseInt('<?php the_field('green'); ?>')) * alpha + parseInt('<?php the_field('green'); ?>')); 
        /* red : (fin - début + début) */
        var b = Math.round((230-parseInt('<?php the_field('blue'); ?>')) * alpha + parseInt('<?php the_field('blue'); ?>')); 

   $(document).scroll(function() {
        /* red : (fin - début + début) */
        $("body").css('background-color', 'rgb(' + r + ',' + g + ',' + b + ')');
    });

</script>

You won't be able to execute the PHP code within your JavaScript because that's purely client side and can't execute on the server, but you can use AJAX or similar to call a PHP page and have the results returned. — HomerPlata
– HomerPlata, Commented Mar 6, 2017 at 15:57
The <script> element implies that this isn't actually a JavaScript file, but is an HTML file. Regardless, you can put PHP code in anything that has a .php extension and/or is processed by the PHP engine server-side. What have you tried and in what way is it not working? — David
– David, Commented Mar 6, 2017 at 15:58
@user3870112: If you want to clarify that question, do so on that question. If there's information you'd like to add to this question, do so on this question. Stack Overflow isn't a scavenger hunt. As for this question, it's not really clear to me what the problem is here. What does the code in the question become client-side? In what way is this not working? — David
– David, Commented Mar 6, 2017 at 16:02

JorgeObregon · Accepted Answer · 2017-03-06 16:00:49Z

1

You can't. PHP is processed in the backend by the PHP server, while JS is processed in the frontend by the browser (JS can be processed in the backend also with NodeJS, but that's a different topic)

Now, to accomplish what you are trying to do, create a <script> tag in your header before you load main.js, in which you add a global var that contains the colors:

<script type="text/javascript">
  var _COLORS_ = {
        r: parseInt('<?php the_field('red'); ?>'), 
        g: parseInt('<?php the_field('green'); ?>'),
        b: parseInt('<?php the_field('blue'); ?>')
  };
</script>

Then, in your main.js file, read from that variable: _COLORS.r or _COLORS.g, or _COLORS.b.

answered Mar 6, 2017 at 16:00

JorgeObregon

3,3701 gold badge14 silver badges12 bronze badges

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

Collectives™ on Stack Overflow

Put php in js page

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