How to style JavaScript?

stonydallas · 02-10-2013, 08:47 AM

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!

low tech · 02-10-2013, 09:29 AM

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>

stonydallas · 02-11-2013, 01:43 AM

Quote:

Originally Posted by low tech

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!

low tech · 02-11-2013, 03:13 AM

Hi

No problem.

To learn more about CSS, you could start here.

Go through the links on the left menu.

LT