Rotating Different Texts -- Same Function [Archive]

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.

<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.