How to change a background color in Javascript based on an entered value

Question

I am trying to create a page that, upon entering a temperature of or higher than 70, the result page will turn red, and if the temperature is below 70, then it will turn blue. I already have a sample page for the first part of the code for the submit page. I just don't want the words to turn colors, I want the entire page to turn colors based on the temperature. Can anyone help?

<html>
<body>
<?php
if (isset($_POST['temperature'])): //isset determines if var has valid contents, even empty string

    //if var is set, show what it contains
    $myFahrenheit = (int)$_POST['temperature']; //cast value sent via post to an integer

    $myCelsius = intval(($myFahrenheit-32) * (5/9)); //calc celsius
    echo '<h1><font color="blue">You entered ' . $myFahrenheit . ' in Fahrenheit!!</font><br />';
    echo '<h1><font color="red"> It is '. $myCelsius .' in celsius!!</font><br />';
    //put link on page to reset form
    print '<a href="' . $_SERVER['PHP_SELF'] . '">Reset page</a>';
else:
    //show form
?>
    <!--Note the server variable indicating the page we are on -->
    <form action="<? print $_SERVER['PHP_SELF']; ?>" method="post">
    Enter your temperature in Fahrenheit <input type="text" name="temperature"><br>
    <input type="submit" value="Show me the temperature in celsius!!">
    </form>
<?
endif;
?>
</body>
</html>

jimp · Accepted Answer · 2012-09-30 05:35:15Z

1

I guess a simple <body> styling will work here?

<html>
<?php
    $style = '';
    if (isset($_POST['temperature']))
    {
        if ($_POST['temperature'] >= 70)
            $style = 'background-color: red;';
        else
            $style = 'background-color: blue;';
    }
?>
<body style="<?php echo htmlspecialchars($style); ?>">

answered Sep 30, 2012 at 5:35

jimp

17.6k3 gold badges30 silver badges39 bronze badges

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

Comments

Afshin · Accepted Answer · 2012-09-30 05:37:38Z

0

if($myFahrenheit > 70)
  echo '<script>document.body.style.background = "red";</script>';
else
  echo '<script>document.body.style.background = "blue";</script>';

answered Sep 30, 2012 at 5:37

Afshin

4,2253 gold badges28 silver badges35 bronze badges

3 Comments

Blender Over a year ago

I can't see why you would need to use PHP to output JavaScript that modifies the CSS of HTML elements...

getlaura Over a year ago

Great! That worked! I'm in a class and still learning. Thank you for your help!

jimp Over a year ago

Wait, when did the question become about JavaScript? The OP was edited? I guess my quick answer got invalidated.

Yogesh Suthar · Accepted Answer · 2012-09-30 06:09:19Z

0

use it like this

<html>
<?php
if (isset($_POST['temperature'])) //isset determines if var has valid contents, even empty string
{//if var is set, show what it contains
$myFahrenheit = (int)$_POST['temperature']; //cast value sent via post to an integer
if($myFahrenheit > 70)
   echo "<body style='background-color:red;'>";
else
   echo "<body style='background-color:blue;'>";
$myCelsius = intval(($myFahrenheit-32) * (5/9)); //calc celsius
 echo '<h1><font color="blue">You entered ' . $myFahrenheit . ' in Fahrenheit!!    </font><br />';
echo '<h1><font color="red"> It is '. $myCelsius .' in celsius!!</font><br />';
//put link on page to reset form
print '<a href="' . $_SERVER['PHP_SELF'] . '">Reset page</a>';
}else{ //show form
?>

edited Sep 30, 2012 at 6:09

answered Sep 30, 2012 at 5:35

Yogesh Suthar

30.5k18 gold badges75 silver badges100 bronze badges

1 Comment

Yogesh Suthar Over a year ago

@getlaura i have edited the code , check it now it will work.

Collectives™ on Stack Overflow

How to change a background color in Javascript based on an entered value

3 Answers 3

Comments

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related