Click Button – Change ClassName

[Total: 0    Average: 0/5]

Both items are defined in cosmetics by the style sheet class name.

Head Code:

<style>
.s1
{
  color: green;
  font-weight: bold;
  background: #ACF;
}
.s2
{
  color: black;
  font-weight: bold;
  background: #FDA;
}
</style>
<script>
function doIt()
{
  var reg=/n/g;
  var x=document.fm.ta.value;
  y=x.replace(reg,"<BR>");
  document.getElementById("target").innerHTML=y;
}
var toggle=0;
var arr=new Array("s1","s2");
function doThis()
{
  toggle=(toggle+1)%2;
  document.getElementById("ta1").className=arr[toggle];
}
function doThat()
{
  document.getElementById("target").className=document.getElementById("ta1").className;
}
</script>

Body Code:

<table>
<tr><td><div id=target class=s2>target text here</div></td></tr>
</table>
<HR>
<form name=fm>
<textarea name=ta class=s1 id=ta1>
This
Is
my line of
text
</textarea>

<BR>
<input type=button value="Click 1" onclick="doIt()">
<input type=button value="Click 2" onclick="doThat()">
<input type=button value="Click 3" onclick="doThis()">
</form>

Times Viewed: 0

Leave a Reply

Your email address will not be published. Required fields are marked *