0

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;
2
Contributors
6
Replies
7
Views
7 Years
Discussion Span
Last Post by Taywin
0

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;
0

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 by Taywin: n/a

0

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" : ""
}
0

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 by Taywin: n/a

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.