Rotating Different Texts -- Same Function

**ren1999** · 05-03-2010, 04:47 AM

First, many thanks in advance for any help I will receive. You are coding gods.
I have seen the same functions used for multiple values using this.index setThisText = _setThisText, etc. However, I can't understand how to apply this to the script below.
I would like the first button to rotate the following text. I would then like the second button to rotate the text after that.
I do not want to have multiple functions that do the same thing.

<html>
<title>Ren's Multiple Text Rotater</title>
<head>
<script>
function changeText()
{
oldHTML = document.getElementById('para').innerHTML ;
newHTML = "<b style='-moz-transform:rotate(90deg)'>" + oldHTML + "</b>" ;
document.getElementById('para').innerHTML = newHTML ;
}
</script>
</head>

<body bgcolor= grey>

<input onClick = changeText() type = button><b id = para>Rotate this text.</b>

<p>

<input onClick = changeText() type = button><b id = para>Rotate this other text.</b>

</body>

</html>

**clueful** · 05-07-2010, 02:40 AM

That function creates additional levels of nested elements each time it is run.

Code:

<html>
<title>Multiple Text Rotator</title>
<head>
<script>

function changeText( id )
{
 var rStyle = '-moz-transform: rotate(90deg);', 
     elem = document.getElementById( id ), 
     es = elem.style;   

 if( es.cssText.indexOf( rStyle ) == -1 )  
  es.cssText += ';' + rStyle; 
 else 
  es.cssText = es.cssText.replace( rStyle, "");  
}

</script>
</head>

<body bgcolor= '#cccccc'>

<input onclick = changeText('para') type = button><b id = 'para'>Rotate this text.</b>

<p>

<input onclick = changeText('para2') type = button><b id = 'para2'>This will work only on Mozilla.</b>

</body>

</html>

You're welcome in advance.

Thread: Rotating Different Texts -- Same Function

Thread Tools

Search Thread

Rotating Different Texts -- Same Function

Bookmarks

Bookmarks

Posting Permissions