Web Analytics Made Easy -
StatCounter Beginner question: Text Color - CodingForum

Announcement

Collapse
No announcement yet.

Beginner question: Text Color

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Beginner question: Text Color

    I have searched the forum, and only found results that use tables.

    What I would like to do is have a variable change color.
    I am using a simple code here that will help me learn on my own code:

    Code:
    document.write(" Welcome to my site, " + username + "");
    The "Welcome to my site" should remain black, but I would like the username to be red.

  • #2
    Code:
    document.write(" Welcome to my site, " + "<font color="red">" + username + "</font> + "");
    Realistically, document.write() is something to be avoided.

    HTML:
    Code:
    <section id=helloText></section>
    JS:
    Code:
    document.getElementById('hellotext').innerHTML="Welcome to my site <section id=userName></section>";
    document.getElementById('userName').innerHTML="whatever";
    document.getElementbyID(userName').style.color="#ff0000";
    That's a rough example, but it's more flexible when things get more complicated.

    Comment


    • #3
      Thank you sir.

      However, this is for a school project, and I wanted to spice it up just a little.

      I do have an additional question:

      From the code below (in it's entirety) everything works well in Firefox, but not on IE. I cannot find a resolution to this.

      Code:
      <SCRIPT LANGUAGE="JavaScript">
      <!--
      function MM_validateForm() { //v4.0
        if (document.getElementById){
          var i,p,q,nm,test,num,min,max,errors='',args=MM_validateForm.arguments;
          for (i=0; i<(args.length-2); i+=3) { test=args[i+2]; val=document.getElementById(args[i]);
            if (val) { nm=val.name; if ((val=val.value)!="") {
              if (test.indexOf('isEmail')!=-1) { p=val.indexOf('@');
                if (p<1 || p==(val.length-1)) errors+='- '+nm+' must contain an e-mail address.\n';
              } else if (test!='R') { num = parseFloat(val);
                if (isNaN(val)) errors+='- '+nm+' must contain a number.\n';
                if (test.indexOf('inRange') != -1) { p=test.indexOf(':');
                  min=test.substring(8,p); max=test.substring(p+1);
                  if (num<min || max<num) errors+='- '+nm+' must contain a number between '+min+' and '+max+'.\n';
            } } } else if (test.charAt(0) == 'R') errors += '- '+nm+' is required.\n'; }
          } if (errors) alert('The following error(s) occurred:\n'+errors);
          document.MM_returnValue = (errors == '');
      } }
      
      var username = prompt("Please enter your name.", "");
      var username2 = username;
      
      
       alert("Welcome to TWManager " +  username  + " .");
      //-->
      </script>
      
      </head>
      
      <body onUnload="alert('Thank you for visiting ' + username + '! Please come again soon.');">
      
      <div class="container">
        <header>
          <a href="#"><img src="logo.png" alt="TWManager LLC" width="940" height="131" id="Insert_logo" style="background: #C6D580; display:block;" /></a>
        </header>
        <div class="sidebar1">
          <nav>
            <ul>
              <li><a href="http://feseg.com/javascript/">Week 1</a></li>
              <li><a href="http://feseg.com/javascript/week2.html">Week 2</a></li>
              
            </ul>
          </nav>
          <aside>
            
          </aside>
        <!-- end .sidebar1 --></div>
        <article class="content">
          <h1>Week 2</h1>
          <section>
           <table  border="0" align="right">
        <tr>
          <td valign="right"><SCRIPT LANGUAGE="JavaScript">
      
      document.write(" Welcome to TWManager LLC, " + username + "");
      
      
           </SCRIPT></td>
        </tr>
      </table>
          </section>
          <section>
            <br />
            <hr />
          <form id="form1" name="form1" method="post" action="">
          <table width="100%" border="0">
        <th>Product Image</th><th></th><th>Product Description</th><th>Price</th><th>Quantity</th><tr>
          <td><img src="d1.jpg" width="134" height="134" /></td>
          <td><img src="d2.jpg" width="134" height="134" /></td>
          <td width="40%" valign="top">
         
          <SCRIPT LANGUAGE="JavaScript">
      
      document.write(""+ username2 + ", Secure your own Domain Name using our services. Choose from .com, .net, .org and many others.");
      
      //-->
           </SCRIPT></td>
          <td width="15%" valign="top"><center>$15.00</center>  </td>
          <td width="15%" valign="top">QTY:
      <input name="domain" type="text" id="domain" onblur="MM_validateForm('domain','','NisNum');return document.MM_returnValue"  size="2" maxlength="2" /></td>
        </tr>
        <tr>
       
          <td width="15%"><img src="h1.jpg" width="134" height="134" /></td>
          <td width="15%"><img src="h2.jpg" width="134" height="134" /></td>
          <td valign="top">
      	
      	<SCRIPT LANGUAGE="JavaScript">
      
      document.write(""+ username2 + ", Hosting gives a home to your Domains. Our Hosting Accounts have 100 gigs of space and unlimited bandwidth, 100 mail boxes and much more");
      
      //-->
           </SCRIPT>.
           
           </td>
          <td valign="top"><center>$120.00</center></td>
          <td valign="top">QTY: <input name="hosting" type="text" id="hosting" onblur="MM_validateForm('hosting','','NisNum');MM_validateForm('webdesign','','NisNum');return document.MM_returnValue" size="2" maxlength="2" /><br /></td>
        </tr>
        <tr>
          <td><img src="des1.jpg" width="134" height="134" /></td>
          <td><img src="des2.jpg" width="134" height="134" /></td>
          <td valign="top">
          <SCRIPT LANGUAGE="JavaScript">
      
      document.write(""+ username2 + ", Web Design is our speciality. Let TWManager design your website, and know you are getting the best service available");
      
      //-->
           </SCRIPT>.
          </td>
          <td valign="top" ><center>$350.00</center></td>
          <td valign="top">QTY: <input name="webdesign" type="text" id="webdesign" size="2" maxlength="2" /></td>
        </tr>
        <tr>
        <td></td>
        <td></td>
        <td></td>
        <td><input name="reset" type="reset" value="Reset" /></td>
        <td><input name="submit" type="submit" value="Submit" /></td>
      </table>
      Do you have any suggestions as to why?
      the current address is: http://feseg.com/javascript/week2.html

      Thanks!

      (PS, my code is finished as far as grading. I am not asking for homework help)
      Last edited by futurecoder12; Aug 29, 2011, 10:45 PM.

      Comment

      Working...
      X