DHTML change text,border and background

Question

sajohnson05 0 Light Poster

14 Years Ago

Below you will find my code for a web program that takes in changes and will change the last area. I am wondering if i need to make the last box a textarea? Also any help with the javascript will be greatly appreciated and any other ways to make it better will be also.

<!DOCTYPE html PUBLIC "-//w3c//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 
<html xmlns = "http://www.w3.org/1999/xhtml"> 
   <head> 
	<title>Dynamic Section Formatting</title>
	<script type ="text/javascript" src = "hw5.js">
	</script>
   </head>

<body>
	<p style ="font-family: Times; font-syle:bold;
	font-size: 24pt;text-align:center;">
		Dynamic Section Formatting
	</p>

	<form action = "">
	<table border ="1">

	<label>
	<tr>
	<td>Border Color:</td>
	<td><input type = "text" name = "border" size ="20"
		onchange = "setColor('border', this.value)" /></td>
	</label>
	</tr>
	<br />

	<tr>
	<label>
	<td>Text Color:</td>
	<td><input type = "text" name = "text" size ="20"
		onchange = "setColor('text', this.value)" /></td>
	</label>
	</tr>
	<br />

	<tr>
	<label>
	<td>Background Color:</td>
	<td><input type = "text" name = "background" size ="20"
		onchange = "setColor('background', this.value)" /></td>
	</label>
	</tr>
	<br />
	
	<tr>
	<label>
	<td>Font Size:</td>
	<td><input type = "text" name = "font" size ="20"
		onchange = "setColor('font', this.value)" /></td>
	</label>
	</tr>
	<br />

	<tr>
	<label>
	<td>Font Weight:</td>
	<td><input type = "radio" name = "weight" size ="20"
		onchange = "setWeight('weight', this.value)" />Normal<br />
	<input type = "radio" name = "weight" size ="20"
		onchange = "setWeight('weight', this.value)" />Bold</td>
	</label>
	</tr>
	<br />
	
	<tr>
	<label>
	<td>Visibility:</td>
	<td><input type = "button" name = "vis" size ="20"
		onclick = "setColor(); "value="Change Visibility"/></td>
	</label>
	</tr>
	<br />
	</table>
	</form>
	<br /><br />
	
	<p style = "font-family: Times; font-syle:bold;
		border-color: red; border-style:solid; 
		border-width:10px;background-color:grey;">
		Section 1<br /><br />
		Here is the first paragraph
	</p>
	
</body>
</html>

function setColor(where, newColor){
	if(where == "background")
		document.body.style.backgroundColor= newColor;
	else
		document.body.style.color= newColor;

html-css javascript

2 Contributors
6 Replies
289 Views
5 Days Discussion Span
Latest Post 14 Years Ago Latest Post by Taywin

Taywin 312 Posting Virtuoso

14 Years Ago

What is 'validate()' function? To validate the input? Why do you have to assign 'onclick()' to your 'vis' button? Also, the way you assign onclick() would not result what you want because functions do not concatenate but they are being replaced until the last one is assigned (setWeight).

Ok, now I have to make an assumption that all values are valid (no validation). Also, your validate() function is just to toggle visibility. Below is a modification of your code. Use it to compare with what you have.

<!DOCTYPE html PUBLIC "-//w3c//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 
<html xmlns = "http://www.w3.org/1999/xhtml"> 
<head>
  <title>Dynamic Section Formatting</title>
  <script type ="text/javascript" src = "hw5.js">
  </script>
  <script type="text/javascript">
  function setBorder(border){
    document.getElementById("PAR").style.borderColor = border;
  }
  function setText(text){
    document.getElementById("PAR").style.color = text;
  }
  function setBackground(background){
    document.getElementById("PAR").style.backgroundColor = background;
  }
  function setSize(fontS){
    document.getElementById("PAR").style.fontSize = fontS+"px";  // FF requires 'px'
  }

  function setWeight(weight){
    document.getElementById("PAR").style.fontWeight = weight;
  }
  function validate(objId) {
    var el = document.getElementById(objId)
    el.style.visibility = (el.style.visibility=="")? "hidden" : "";
  }
  </script>
</head>

<body>
  <p style ="font-family: Times; font-syle:bold;
  font-size: 24pt;text-align:center;">
    Dynamic Section Formatting
  </p>

  <form action = "">
  <table border ="1">

  <label>
  <tr>
  <td>Border Color:<name = "borderColor"/></td>
  <td><input type = "text" name = "border" size ="20"
    onchange = "setBorder(this.value)" /></td>
  </label>
  </tr>
  <br />

  <tr>
  <label>
  <td>Text Color:<name = "textColor"/></td>
  <td><input type = "text" name = "text" size ="20"
    onchange = "setText(this.value)" /></td>
  </label>
  </tr>
  <br />

  <tr>
  <label>
  <td>Background Color:<name = "backgroundColor"/></td>
  <td><input type = "text" name = "background" size ="20"
    onchange = "setBackground(this.value)" /></td>
  </label>
  </tr>
  <br />
  
  <tr>
  <label>
  <td>Font Size:<name = "fontSize"/></td>
  <td><input type = "text" name = "font" size ="20"
    onchange = "setSize(this.value)" /></td>
  </label>
  </tr>
  <br />

  <tr>
  <label>
  <td>Font Weight:<name = "fontWeight"/></td>
  <td><input type = "radio" name = "weight" size ="20" value='normal'
    onchange = "setWeight(this.value)" />Normal<br />
  <input type = "radio" name = "weight" size ="20" value='bold'
    onchange = "setWeight(this.value)" />Bold</td>
  </label>
  </tr>
  <br />
  
  <tr>
  <label>
  <td>Visibility:</td>
  <td><input type = "button" id = "vis" size ="20"
    onclick = "validate('PAR');" "value="Change Visibility"/></td>
  </label>
  </tr>
  <br />

  </table>
  </form>

  <br /><br />
  
  <p id ="PAR" style ="border-color: red; border-style:solid; 
    border-width:10px;padding:10;background-color:grey;">
    Section 1<br /><br />
    Here is the first paragraph
  </p>
</body>
</html>

Edited 14 Years Ago by Taywin because: n/a

Taywin 312 Posting Virtuoso

14 Years Ago

By the center of the page, you mean you want everything to be centered or just certain part? In CSS, you use 'text-align' with value 'center' to assign horizontal alignment for display (more like text). In JavaScript, the property is in style.textAlign. However, this alignment will not work with 'span' (text display regardless position) or 'table' (if you want your table to be displayed in the center of the page) tag. If you want vertical center, you can use 'vertical-align' with value 'middle'.

// example1
// +-----------------------------+
// |ABC                          |
// |                             |
// |                             |
// |                             |
// |                             |
// +-----------------------------+
<div style="width:300px;height;200px">
ABC
</div>

// example2
// In javascript, use element.style.textAlign = "center"
// +-----------------------------+
// |             ABC             |
// |                             |
// |                             |
// |                             |
// |                             |
// +-----------------------------+
<div style="width:300px;height;200px;text-align:center">
ABC
</div>

// example3
// In javascript, use element.style.textAlign = "center"
// In javascript, use element.style.verticalAlign = "middle"
// +-----------------------------+
// |                             |
// |                             |
// |             ABC             |
// |                             |
// |                             |
// +-----------------------------+
<div style="width:300px;height;200px;text-align:center;vertical-align:middle">
ABC
</div>

Edited 14 Years Ago by Taywin because: n/a

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

sajohnson05 0 Light Poster · Answer 1 · 2010-07-21T21:29:11+00:00

sajohnson05 0 Light Poster

14 Years Ago

Anyone got any ideas?

sajohnson05 0 Light Poster · Answer 2 · 2010-07-22T01:01:00+00:00

Updated code plase take a look and tell me what i am doing wrong
Thanks

<!DOCTYPE html PUBLIC "-//w3c//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 
<html xmlns = "http://www.w3.org/1999/xhtml"> 
   <head> 
	<title>Dynamic Section Formatting</title>
	<script type ="text/javascript" src = "hw5.js">
	</script>
   </head>

<body>
	<p style ="font-family: Times; font-syle:bold;
	font-size: 24pt;text-align:center;">
		Dynamic Section Formatting
	</p>

	<form action = "">
	<table border ="1">

	<label>
	<tr>
	<td>Border Color:<name = "borderColor"/></td>
	<td><input type = "text" name = "border" size ="20"
		onchange = "setBorder('border', this.value)" /></td>
	</label>
	</tr>
	<br />

	<tr>
	<label>
	<td>Text Color:<name = "textColor"/></td>
	<td><input type = "text" name = "text" size ="20"
		onchange = "setText('text', this.value)" /></td>
	</label>
	</tr>
	<br />

	<tr>
	<label>
	<td>Background Color:<name = "backgroundColor"/></td>
	<td><input type = "text" name = "background" size ="20"
		onchange = "setBackground('background', this.value)" /></td>
	</label>
	</tr>
	<br />
	
	<tr>
	<label>
	<td>Font Size:<name = "fontSize"/></td>
	<td><input type = "text" name = "font" size ="20"
		onchange = "setSize('font', this.value)" /></td>
	</label>
	</tr>
	<br />

	<tr>
	<label>
	<td>Font Weight:<name = "fontWeight"/></td>
	<td><input type = "radio" name = "weight" size ="20"
		onchange = "setWeight('weight', this.value)" />Normal<br />
	<input type = "radio" name = "weight" size ="20"
		onchange = "setWeight('weight', this.value)" />Bold</td>
	</label>
	</tr>
	<br />
	
	<tr>
	<label>
	<td>Visibility:</td>
	<td><input type = "button" id = "vis" size ="20"
		onclick = "validate();" "value="Change Visibility"/></td>
	</label>
	</tr>
	<br />

	</table>
	</form>

	<br /><br />
	
	<p id ="PAR" style ="border-color: red; border-style:solid; 
		border-width:10px;padding:10;background-color:grey;">
		Section 1<br /><br />
		Here is the first paragraph
	</p>

	<script type="text/javascript" src="hw5r.js">
	</script>
</body>
</html>

function setBorder(border){
document.getElementById("PAR").style.borderColor = border;

}
function setText(text){
document.getElementById("PAR").style.textColor = text;

}
function setBackground(background){
document.getElementById("PAR").style.backgroundColor = background;

}
function setSize(font){
document.getElementById("PAR").style.fontSize = font;

}

function setWeight(weight){
document.getElementById("PAR").style.fontWeight = weight;

}

document.getElementById("vis").onclick = setBorder;
document.getElementById("vis").onclick = setText;
document.getElementById("vis").onclick = setBackground;
document.getElementById("vis").onclick = setSize;
document.getElementById("vis").onclick = setWeight;

sajohnson05 0 Light Poster · Answer 3 · 2010-07-26T07:30:40+00:00

Any help on this would help a lot. It would teach me about it

sajohnson05 0 Light Poster · Answer 4 · 2010-07-26T20:18:50+00:00

Thanks for your help. One last question how do i get everything in the center of my page?

What i really wanted to happen was when you click the button everything changes but its not a big deal. If anyone wants to tell me what i did wrong with that let me know but if you can not then thats ok. Just really would like for my stuff to be in the center of the page.

<!DOCTYPE html PUBLIC "-//w3c//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 
<html xmlns = "http://www.w3.org/1999/xhtml"> 
   <head> 
	<title>Dynamic Section Formatting</title>
	<script type ="text/javascript" src = "hw5.js">
	</script>
   </head>

<body>
	<p style ="font-family: Times; font-syle:bold;
	font-size: 24pt;text-align:center;">
		Dynamic Section Formatting
	</p>

	<form action = "">
	<table border ="1">
	
	<label>
	<tr>
	<td>Border Color:<name = "borderColor"/></td>
	<td><input type = "text" name = "border" size ="20"
		onchange = "setBorder(this.value)" /></td>
	</label>
	</tr>
	<br />

	<tr>
	<label>
	<td>Text Color:<name:"textColor"/></td>
	<td><input type = "text" name = "text" size ="20"
		onchange = "setText(this.value)" /></td>
	</label>
	</tr>
	<br />

	<tr>
	<label>
	<td>Background Color:<name ="backgroundColor/></td>
	<td><input type = "text" name = "background" size ="20"
		onchange = "setBackground(this.value)" /></td>
	</label>
	</tr>
	<br />
	
	<tr>
	<label>
	<td>Font Size:<name = "fontSize"/></td>
	<td><input type = "text" name = "font" size ="20"
		onchange = "setSize(this.value)" /></td>
	</label>
	</tr>
	<br />

	<tr>
	<label>
	<td>Font Weight:<name="fontWeight"/></td>
	<td><input type = "radio" name = "weight" size ="20" value ='normal'
		onchange = "setWeight(this.value)" />Normal<br />
	<input type = "radio" name = "weight" size ="20" value ='bold'
		onchange = "setWeight(this.value)" />Bold</td>
	</label>
	</tr>
	<br />
	
	<tr>
	<label>
	<td>Visibility:</td>
	<td><input type = "button" id = "vis" size ="20"
		onclick = "validate('PAR');" "value="Change Visibility"/></td>
	</label>
	</tr>
	<br />
	
	</table>
	</form>

	<br /><br />
	
	<p id ="PAR" style ="border-color: red; border-style:solid; 
		border-width:10px;padding:10;background-color:grey;">
		Section 1<br /><br />
		Here is the first paragraph
	</p>
	
	<script type="text/javascript" src="hw5r.js">
	</script>
</body>
</html>

function setBorder(border){
document.getElementById("PAR").style.borderColor = border;

}
function setText(text){
document.getElementById("PAR").style.color = text;

}
function setBackground(background){
document.getElementById("PAR").style.backgroundColor = background;

}

function setSize(fontS){
document.getElementById("PAR").style.fontSize = fontS+"px";

}

function setWeight(weight){
document.getElementById("PAR").style.fontWeight = weight;

}
  function validate(objId) {
    var el = document.getElementById(objId)
    el.style.visibility = (el.style.visibility=="")? "hidden" : ""
}