Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    Regular Coder
    Join Date
    Nov 2011
    Posts
    131
    Thanks
    11
    Thanked 0 Times in 0 Posts

    change color of text with javascript

    here is my problem
    i need to set the color of a text here is what i need to change

    Code:
    <div style="position:absolute; left:10px; top:100px; width:250px; text-align:center;">
    
    
    
    <font color="lightgreen" size="6"><b>* Mileage *</b></font><b>
    <font color="black" size="6"><div id="bullet4">Not Specified</div></font><br></b>
    
    <font color="lightgreen" size="6"><b>* Gearbox *</b></font><b>
    <font color="black" size="6"><div id="bullet5">Not Specified</div></font><br></b>
    
    <font color="lightgreen" size="6"><b>* Engine size *</b></font><b>
    <font color="black" size="6"><div id="bullet6">Not Specified</div></font><br></b>
    
    <font color="lightgreen" size="6"><b>* Body style *</b></font><b>
    <font color="black" size="6"><div id="bullet7">Not Specified</div></font><br></b>
    
    
    
    
    </div>
    now i need to set the color from a text file server side
    so far i can set the contents of the div serverside but the customer needs to be able to change the color of the innerhtml .
    now i would like to store the color in a text file color.txt i can make the code to change the txt file myself
    inside the color.txt would be "lightgreen" or other color
    how would i go about this.
    so in basic terms i need to set the color of the text from a color.txt file sat next to the index.html

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,596
    Thanks
    80
    Thanked 4,631 Times in 4,594 Posts
    First question: How will you *create* that color.txt file?

    If you are going to allow the web user to choose colors, for example, then you will need some server-side processing to store the data. And if that is so, then why not use server-side processing to serve up the page with the colors from color.txt already in place?
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #3
    Regular Coder
    Join Date
    Nov 2011
    Posts
    131
    Thanks
    11
    Thanked 0 Times in 0 Posts
    i have made a perl script to make the color.txt file.
    i have put to much into this to change everything now.
    i just need to figure out how to do this bit.......any ideas

  • #4
    Regular Coder
    Join Date
    Nov 2011
    Posts
    131
    Thanks
    11
    Thanked 0 Times in 0 Posts
    also the parts where it says "not specified" i already have a jquery script to change the innerhtml with a remot text file.
    so getting the color.txt into a javascript variable i can do.
    just need a way of changing the color. like this

    var newcolor = "yellow";
    document.bullet4.fontcolor.value = newcolor;

    i know this wont work but i need something like this if its possible.

  • #5
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,917
    Thanks
    6
    Thanked 1,040 Times in 1,013 Posts
    For one, you are using invalid HTML. The font element has been deprecated for at least 10 years now and should not be used. And even though the b element has always been “valid” I still find it bad practice, even though they’ve imposed a semantic meaning on it in HTML 5 now. What you want can all be done with CSS and separation of style and content. You’d add a class for each state you have and use that class as CSS selector to style the element. Then you change the className with JavaScript and there you go.

  • #6
    Regular Coder
    Join Date
    Nov 2011
    Posts
    131
    Thanks
    11
    Thanked 0 Times in 0 Posts
    could anyone give me an example to work with please..

  • #7
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,302
    Thanks
    203
    Thanked 2,562 Times in 2,540 Posts
    Here you are ....

    Code:
    <html>
    <head>
    
    <style type = "text/css">
    .myclassred {color:red}
    .myclassgreen {color:green}
    </style>
    
    </head>
    
    <body>
    
    <input type = "text" id = "mytextbox" value = "Some Data Here" class = "myclassred">
    <input type = "button" value = "Click to change text color" onclick = "changeit()">
    
    <script type = "text/javascript">
    function changeit() {
    var val = document.getElementById("mytextbox").className;
    if (val == "myclassred") {val = "myclassgreen"}
    else {val = "myclassred"}
    document.getElementById("mytextbox").className = val;
    
    }
    </script>
    
    </body>
    </html>
    You could replace the if...else statements with:-

    Code:
    val == "myclassred" ? val = "myclassgreen" : val = "myclassred";
    Obviously you could use the id of a <span> or <div> rather than a textbox.

    "Often the football piches look barren and parched at this time of the year, mostly due to frost and rain....." - Football Commentator, BBC 2
    Last edited by Philip M; 01-18-2012 at 05:53 PM.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •