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 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Feb 2013
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts

    How to style JavaScript?

    I have this code that replaces text entered in a box
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <script src="jquery.js"></script>
    <script>
    function replaceText(){
        // witth is not a spelling error, you cant
        // use with for a variable name
        // create array of replace objects
        var rep =[
            {replace : "cat", witth : "hat"}, 
            {replace : "dark", witth : "light"}
        ], // declare the rest of the variables
        i,
        // get value of the textarea
        text=document.getElementById("txt").value,
        // return text is now the value of the textarea
        returnText=text;
        // for every object in the rep (replace) array
        for(i=0;i<rep.length;i++){
            // replace "replace" with "witth" using
            // rep array
            returnText=returnText.replace(new RegExp(
              rep[i].replace,"igm"),rep[i].witth);
        }
        // set value of the text area
        document.getElementById("txt").value=returnText
    }
    </script>
    </head>
    <body >
    <textarea id="txt">The dark cat.</textarea>
    <input type="button" onclick="replaceText();" value="Replace"/>
    </body>
    </html>
    Now I need to style it!!!
    I really only need to center it and move the "replace" button below, but If you also know how i would like to have the text area black, the text inside the replace button white, the button background black, the button border square and the button border white!
    I am a beginner to css and i'm very confused!
    If you only know how to do one of the listed styles that's fine! If it only looks a bit better, well, that's an improvement!

    Thanks for your time!
    Last edited by stonydallas; 02-10-2013 at 09:27 AM.

  • #2
    Regular Coder low tech's Avatar
    Join Date
    Dec 2009
    Posts
    852
    Thanks
    173
    Thanked 94 Times in 94 Posts
    Hi

    Use CSS to style

    sample:

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <script src="jquery.js"></script>
    <script>
    function replaceText(){
        // witth is not a spelling error, you cant
        // use with for a variable name
        // create array of replace objects
        var rep =[
            {replace : "cat", witth : "hat"}, 
            {replace : "dark", witth : "light"}
        ], // declare the rest of the variables
        i,
        // get value of the textarea
        text=document.getElementById("txt").value,
        // return text is now the value of the textarea
        returnText=text;
        // for every object in the rep (replace) array
        for(i=0;i<rep.length;i++){
            // replace "replace" with "witth" using
            // rep array
            returnText=returnText.replace(new RegExp(
              rep[i].replace,"igm"),rep[i].witth);
        }
        // set value of the text area
        document.getElementById("txt").value=returnText
    }
    </script>
    <style type="text/css">
    #TAreaDiv {
    	height: auto;
    	width: 250px; /* sample size change to suit */
    	border: thin dotted #00FF00;
    }
    #txt {
    	position:relative;
    	color: #FFFFFF; /* text white*/
    	background: #000000; /* black */
    	margin:0 auto;
    	display: block;
    }
    #txtAreaBtn {
    	position:relative;
    	border:#FFFFFF thin solid; /* white */
    	margin:0 auto;
    	display: block;
    	color: #FFFFFF; /* white */
    	background: #000000; /* black */
    }
    </style>
    </head>
    <body >
    <div id="TAreaDiv">
    <textarea id="txt">The dark cat.</textarea>
    <input type="button" id="txtAreaBtn" onClick="replaceText();" value="Replace"/>
    </div>
    </body>
    </html>
    Last edited by low tech; 02-10-2013 at 09:51 AM.
    "The greatest revenge is to accomplish what others say you cannot do."
    ~ Unknown

    I used to be indecisive, but now I'm not so sure.

  • Users who have thanked low tech for this post:

    stonydallas (02-10-2013)

  • #3
    New to the CF scene
    Join Date
    Feb 2013
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by low tech View Post

    sample:

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <script src="jquery.js"></script>
    <script>
    function replaceText(){
        // witth is not a spelling error, you cant
        // use with for a variable name
        // create array of replace objects
        var rep =[
            {replace : "cat", witth : "hat"}, 
            {replace : "dark", witth : "light"}
        ], // declare the rest of the variables
        i,
        // get value of the textarea
        text=document.getElementById("txt").value,
        // return text is now the value of the textarea
        returnText=text;
        // for every object in the rep (replace) array
        for(i=0;i<rep.length;i++){
            // replace "replace" with "witth" using
            // rep array
            returnText=returnText.replace(new RegExp(
              rep[i].replace,"igm"),rep[i].witth);
        }
        // set value of the text area
        document.getElementById("txt").value=returnText
    }
    </script>
    <style type="text/css">
    #TAreaDiv {
    	height: auto;
    	width: 250px; /* sample size change to suit */
    	border: thin dotted #00FF00;
    }
    #txt {
    	position:relative;
    	color: #FFFFFF; /* text white*/
    	background: #000000; /* black */
    	margin:0 auto;
    	display: block;
    }
    #txtAreaBtn {
    	position:relative;
    	border:#FFFFFF thin solid; /* white */
    	margin:0 auto;
    	display: block;
    	color: #FFFFFF; /* white */
    	background: #000000; /* black */
    }
    </style>
    </head>
    <body >
    <div id="TAreaDiv">
    <textarea id="txt">The dark cat.</textarea>
    <input type="button" id="txtAreaBtn" onClick="replaceText();" value="Replace"/>
    </div>
    </body>
    </html>
    Thanks this works!

  • #4
    Regular Coder low tech's Avatar
    Join Date
    Dec 2009
    Posts
    852
    Thanks
    173
    Thanked 94 Times in 94 Posts
    Hi

    No problem.

    To learn more about CSS, you could start here.

    Go through the links on the left menu.

    LT
    "The greatest revenge is to accomplish what others say you cannot do."
    ~ Unknown

    I used to be indecisive, but now I'm not so sure.


  •  

    Tags for this Thread

    Posting Permissions

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