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
    New Coder
    Join Date
    Nov 2011
    Posts
    94
    Thanks
    4
    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
    25,189
    Thanks
    75
    Thanked 4,341 Times in 4,307 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
    New Coder
    Join Date
    Nov 2011
    Posts
    94
    Thanks
    4
    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
    New Coder
    Join Date
    Nov 2011
    Posts
    94
    Thanks
    4
    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,635
    Thanks
    6
    Thanked 1,003 Times in 976 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
    New Coder
    Join Date
    Nov 2011
    Posts
    94
    Thanks
    4
    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
    17,918
    Thanks
    203
    Thanked 2,531 Times in 2,509 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 04: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
    •