How to turn text red if negative or green if positive?

Atlante Avila

Hello all, I have the following code for a form that calculates the total amount based on some form elements, how would I go about changing the text color in the div called total to green if it's a positive number or red if it's a negative number? Thanks in advance for any help or suggestions!

Expand|Select|Wrap|Line Numbers

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Our hosting plans are not only affordable, but they're packed full of features, it's an increadible deal!</title>

<link href="style.css" rel="stylesheet" type="text/css"></link>

<style>

.test {

    color:red;

}

#total {

    font-size:40px;

}

h1 {

    margin: 0 0 10px 0;

    text-decoration: underline;

    text-align: center;

}

h2 {

    margin: 0 0 10px 0;

}

.wrapr form ul {

    float: left;

    width: 300px;

    list-style-type: none;

    padding: 0px;

    margin-top: 0px;

    margin-right: 0px;

    margin-bottom: 0px;

    margin-left: 10px;

}

.wrapr form ul li {

    display: inline;

    float: left;

    margin-right: 15px;

}

</style>

<script>

  calculate = function(totalElement)

  {

      if (totalElement)

      {   

          var calculation  = '';

          var overall = '';

          var fields = new Array();

          var theElement = document.getElementById(totalElement);

          var userInputs = myform.elements;

          var the_type = '';

          for (var f = 0; f < userInputs.length; f++)

          { 

              if (userInputs[f].className=='special_value')

              {

                  if (userInputs[f].type=='select-one')

                  {

                      if(userInputs[f].options[userInputs[f].selectedIndex].value)

                      {

                          fields[f] = userInputs[f].options[userInputs[f].selectedIndex].value;

                      }

                      else

                      {

                          fields[f] = 0;

                      }

                  }

                  else if(userInputs[f].type=='radio' || userInputs[f].type=='checkbox')

                  {

                      if (userInputs[f].checked)

                      {

                          fields[f] = userInputs[f].value;

                      }

                      else

                      {

                          fields[f] = 0;

                      }

                  }

                  else

                  {

                      if (userInputs[f].value)

                      {

                          fields[f] = userInputs[f].value;

                      }

                      else

                      {

                          fields[f] = 0;

                      }

                  }

              }

          }
 
          for (var i=0; i<fields.length; i++)

          { 

              calculation += fields[i];
 
              if (i!=fields.length-1)

              {

                  calculation += '+';

              }

          }
 
          if (calculation!='')

          {

              overall = eval(calculation).toFixed(2);

          }
 
          if (overall!='')

          {

              theElement.innerHTML = 'Your quote is within $'+overall+ ' of your budget';

          }

      }

  }

</script>
 
<!--[if IE]>

    <script src="lib/html5.js" type="text/javascript"></script>

<![endif]-->

<script type="text/javascript">
 
  var _gaq = _gaq || [];

  _gaq.push(['_setAccount', 'UA-16023202-1']);

  _gaq.push(['_trackPageview']);
 
  (function() {

    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;

    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';

    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);

  })();
 
</script>

</head>
 
<body>

<div class="header">

  <div class="top"><script type="text/javascript" src="/help/livehelp_js.php?eo=1&relative=Y&amp;department=2&amp;serversession=1&amp;pingtimes=15&amp;secure=Y"></script></div>

  <div class="logo">

    <h1><a href="http://www.drummerboyhosting.com/">drummer boy hosting web design and hosting servies</a></h1>

  </div>

  <div class="menuwrap">

  <ul id="topnav"> 

        <li> 

            <a href="index.php" class="home">Home Page</a> 

        </li> 

        <li> 

             <a href="plans.php" class="products">Hosting Packages</a> </li>

      <li><a href="portfolio.php">Design Portfolio</a></li>

      <li class="current"><a href="quotes.php">Design Quotes</a></li>

        <li><a href="contact.php">Contact Us</a></li>

  </ul> 

  </div>

</div>

<div class="wrapr">

<form name="myform">
 
  <h2>Please fill out the form below to obtain your quote!</h2>

  <p>Do you need a cms (content management system)?<br />

    <select onchange="calculate('total');" name="price" class="special_value">

      <option value="0">Please Choose One</option>

      <option value="-150">No. A static website will do</option>

      <option value="-250">Yes, WordPress</option>

      <option value="-499">Yes, Joomla</option>

      <option value="-499">Yes, Drupal</option>

    </select>

  </p>

  <p>What is your budget?<br />

    <select onchange="calculate('total');" name="price5" class="special_value">

      <option value="0">Please Choose One</option>

      <option value="700">$700</option>

      <option value="800">$800</option>

      <option value="900">$900</option>

      <option value="1000">$1000</option>

      <option value="1100">$1100</option>

      <option value="1200">$1200</option>

      <option value="1300">$1300</option>

      <option value="1400">$1400</option>

      <option value="1500">$1500</option>

      <option value="1600">$1600</option>

      <option value="1700">$1700</option>

      <option value="1800">$1800</option>

      <option value="1900">$1900</option>

      <option value="2000">$2000</option>

    </select>

    <br /><br /><br />

  </p>

  <div id="total"></div>
 
  <input onClick="calculate('total');" type="button" name="button" value="re-calculate">
 
</form>

<br style="clear:both" />

</div>

<div class="planfeatures"></div>

<div class="footer">  <ul id="fnav">

      <li> <a href="index.php" class="home">Home Page</a> </li>

      <li > <a href="plans.php" class="products">Hosting Packages</a></li>

      <li><a href="portfolio.php">Design Portfolio</a></li>

      <li class="fcurrent"><a href="quotes.php">Design Quotes</a></li>

      <li><a href="contact.php">Contact Us</a></li>

    </ul></div>

<!--[if IE 8]>

    <script type="text/javascript">

        $("#griddler_ii section ul li:nth-child(even)").addClass("even");

    </script>

<![endif]-->

</body>

</html>

Nov 10 '10 #1

Subscribe Post Reply

4495

NeoPa

32,556

Expert Mod 16PB

I can't help with an answer, but if I suggest that you indicate whereabouts in your lengthy posted code the relevant item can be found, it may help you to get one from someone who knows this subject.

Nov 10 '10 #2

Atlante Avila

Thank you NeoPa, I want the item text in the div id of total on line 182 which is generated from the javascript on lines 104 to 107.

Nov 10 '10 #3

NeoPa

32,556

Expert Mod 16PB

As I say, I've never used JavaScript, but until a local expert turns up I would suggest setting up a variable (around line #48 or so) that you can set up with the string of the HTML tag for the colour.

Your code, inserted before line #106, would assign the correct value for either green or red, depending on an If statement that checks either the overall or calculation values against zero (0).

Lastly, you would update the line that is currently #106 (but has been shifted down with the addition of the earlier inserted code), to include this new variable, and thus the already correct HTML code, such that when resolved it includes your value as coloured in the result of theElement.innerHTML.

Does this make sense to you?

Nov 11 '10 #4

Atlante Avila

Thanks again NeoPa but not at all, I was given this code by someone that created it and said call me if you need anything else, and vioala, now that he has my money and forgot that I wanted this feature he is unreachable. Thank you though! I appreciate your attempt at trying to help me, but if you could provide me with an example code, I would really appreciate it! Thanks again!

Nov 15 '10 #5

Similar topics

turn text lines into a list

by: Xah Lee | last post by:

i have a large number of lines i want to turn into a list. In perl, i can do @corenames=qw( rb_basic_islamic sq1_pentagonTile sq_arc501Tile sq_arc503Tile );

Python

to find the input is negative or positive

by: bafidi | last post by:

i write a number to textbox1.text i want to learn if it is negative or positive

.NET Framework

How to make all negative values positive?

by: deko | last post by:

Is there an easy way to make all negative values positive in a particular table? I've been experimenting with this: Dim rst As DAO.Recordset Set rst = db.OpenRecordset("tblNegValues") Do...

Microsoft Access / VBA

Decide if a number is negative or positive?

by: Johs | last post by:

I need to make some special action if 'a' and 'b' are both positive or both negative. Is there some inbuilt function to check this? Johs

C / C++

Reversing number signs (negative to positive and vice versa)

by: STEPHENSS | last post by:

Hi, New to SQL. I need to reverse the signs, for example I have an amount of -1,500.00 and I need to change the the Amount to 1,500.00 and all positives amount to a negative amount also. ...

MySQL Database

How to turn on java script in a villaon keypad mobile phone

by: Charles Arthur | last post by:

How do i turn on java script on a villaon, callus and itel keypad mobile phone

Java

Batch import of multiple excel files into the database

by: ryjfgjl | last post by:

If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...

Data Management

Migrating Website to Cloud - Emmanuel Katto

by: emmanuelkatto | last post by:

Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel

General

Navigating the Data Structures and Algorithms (DSA)

by: BarryA | last post by:

What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...

Algorithms / Advanced Math

Is that possible of reading the .csv file in column wise and the column have different lengths ?

by: Sonnysonu | last post by:

This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...

C / C++

How to build RAID in BIOS?

by: Hystou | last post by:

There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...

Computer Hardware

Changing the language in Windows 10

by: Hystou | last post by:

Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...

Windows Server

The easy way to turn off automatic updates for Windows 10/11

by: Hystou | last post by:

Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...

Windows Server

Discussion: How does Zigbee compare with other wireless protocols in smart home applications?

by: tracyyun | last post by:

Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...

General