Jump to content

How to access a PHP variable in both CSS and HTML?


Recommended Posts

I want to create a website that can test your counting pace. I’ll make colored, square div that change color after 10 to 30 seconds when you hover over it, and then you’ll type down how long you think it took in a form to check if you’re right.
My solution to do this is to create the PHP variable $time = rand(10,30), and in CSS get the div:hover transition-delay to be $time. Then, after the form, I need the same variable for if($_POST[timeguess] = $time) {echo “Correct!”}.
I have no idea how to access the same variable in both the CSS and HTML, so I hope some of you can help me out!

Thanks :)

Link to comment
Share on other sites

Hello Mythical,


The part you need to understand is that PHP lives on the server, and HTML/CSS/JS lives on the client browser.  The only way to can use them on both is if you send the variables from one to another.


One option is for PHP to create a web page and for PHP to echo your random time both within your CSS and within a hidden input.  By echoing it, you are writing it or sending it from the server to the client.  Then when the user fills out the form, both the hidden input and the timeguess input are posted or sent to the server.


Some recommend not using PHP to dynamically generate CSS (or JS for that mater), and another alternative would be to echo an attribute such as data-time in you HTML, and use JS of the color changing.


Good luck!

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.