Using the Same Function to Rotate Different Text

R

Ren

I know that we should not have two Id's that are the same but don't
know how to apply an array.

I want the first button to rotate the first text. I want the second
button to rotate the second text. But I want to use the same function
to do it.

<html>
<title>A 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>
 
D

David Mark

Ren said:
I know that we should not have two Id's that are the same but don't
know how to apply an array.
Click to expand...

That has no real meaning.
I want the first button to rotate the first text. I want the second
button to rotate the second text. But I want to use the same function
to do it.

<html>
<title>A Multiple Text Rotater</title>
Click to expand...

That's out of place.
<head>
<script>
Click to expand...

That's missing a required attribute.
function changeText()
{
oldHTML = document.getElementById('para').innerHTML ;
newHTML = "<b style='-moz-transform:rotate(90deg)'>" + oldHTML +
"</b>" ;
Click to expand...

That's quite a collision of old and new. Why a bold element? BTW, that
style is gibberish to anything but Mozilla-based browsers (and why
wouldn't you just apply the style to the element?)
document.getElementById('para').innerHTML = newHTML ;
Click to expand...

ISTM that nothing good is going to come of this.
}
</script>
</head>
<body bgcolor= grey>
Click to expand...

That's a deprecated (and malformed) attribute.
<input onClick = changeText() type = button><b id = para>Rotate this
text.</b>
Click to expand...

What do you suppose that will look like after multiple clicks?
<p>

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

So the problem seems to be that you have no idea what you are doing in
the listener (in more than one way), which has led you to use the same
ID for multiple elements.

Personally, I would give the buttons ID's (not to mention values!) I
would then give the elements containing the text similar ID's. Then on
click I would convert the button ID to the container ID. I doubt you
can take it from there at this stage, but it is all I have time to give you.
 
G

Gregor Kofler

Am 2010-05-05 06:33, Ren meinte:
I know that we should not have two Id's that are the same but don't
know how to apply an array.
Click to expand...
I want the first button to rotate the first text. I want the second
button to rotate the second text. But I want to use the same function
to do it.

<html>
<title>A 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>
Click to expand...

Get a clue about proper markup first. Then come back for your
proprietary JS stuff.

Gregor
 
R

RobG

Any suggestions for how to improve this JavaScript would be greatly
appreciated.

Here is the role-playing combat tracker in JavaScript for the latest
Firefox browser.http://kira3696.tripod.com/dnd/combattracker.html

Here is where most of the source code is.http://kira3696.tripod.com/dnd/scripts/characters.js
Click to expand...

1. Fix the horrendous markup:
<URL:
http://validator.w3.org/check?uri=h...(detect+automatically)&doctype=Inline&group=0
2. Ditch the awful mish-mash of libraries:
<script src="scripts/wz_dragdrop.js"></script>
<script src="scripts/AGE.js"></script>
<script src="images/boxes/boxes.js"></script>
<script src="scripts/dice.js"></script>
<script src="scripts/misc.js"></script>
<script src="scripts/characters.js"></script>
<script src="defaults.js"></script>
<script src = jquery-1.4.2.min.js></script>

3. Write code that works in more than one browser - I gave up loading
the page when Safari showed its "Slow Script" dialog.

I'd like to be able to click and rotate 90 degrees any piece.
Click to expand...

Use sprites with images that are already rotated, it will work in many
more browsers than those that support the proprietary -moz CSS
extensions:

I'd also like to replace all the prompts with just innerHTML.
Click to expand...

I have no idea what prompts you have, but innerHTML is likely not the
way to go. You can probably just replace the text of the element used
for prompts rather than modifying its innerHTML property.
 
R

Ren

1. Fix the horrendous markup:
   <URL:http://validator.w3.org/check?uri=http://kira3696.tripod.com/...



2. Ditch the awful mish-mash of libraries:
     <script src="scripts/wz_dragdrop.js"></script>
     <script src="scripts/AGE.js"></script>
     <script src="images/boxes/boxes.js"></script>
     <script src="scripts/dice.js"></script>
     <script src="scripts/misc.js"></script>
     <script src="scripts/characters.js"></script>
     <script src="defaults.js"></script>
     <script src = jquery-1.4.2.min.js></script>

3. Write code that works in more than one browser - I gave up loading
the page when Safari showed its "Slow Script" dialog.


Use sprites with images that are already rotated, it will work in many
more browsers than those that support the proprietary -moz CSS
extensions:



I have no idea what prompts you have, but innerHTML is likely not the
way to go. You can probably just replace the text of the element used
for prompts rather than modifying its innerHTML property.
Click to expand...

Thanks Rob. I'm starting with the Validation site.
 
R

Ren

Some background..

I'm only testing this code with the latest Firefox.

I'm using the Error Console to screen for bugs.

The code below, though it is not strictly compliant with standards,
works.

Is there a way to do this code more efficiently? Using only one
function?

<html>
<title>Rotate Multiple Elements with the Same Function</title>
<head>
<script>

function changeText()
{
oldHTML = document.getElementById('para').innerHTML ;
newHTML = "<b style='-moz-transform:rotate(90deg)'>" + oldHTML +
"</b>" ;
document.getElementById('para').innerHTML = newHTML ;
}

function changeText1()
{
oldHTML = document.getElementById('para1').innerHTML ;
newHTML = "<b style='-moz-transform:rotate(90deg)'>" + oldHTML +
"</b>" ;
document.getElementById('para1').innerHTML = newHTML ;
}

</script>
</head>
<body bgcolor= grey>

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

<p>

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

</body>
</html>
 
S

Scott Sauyet

Is there a way to do this code more efficiently? Using only one
function?
Click to expand...

Yes.

function changeText(elt)
{
oldHTML = document.getElementById(elt).innerHTML ;
newHTML = "<b style='-moz-transform:rotate(90deg)'>" + oldHTML +
"</b>" ;
document.getElementById(elt).innerHTML = newHTML ;
}

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

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

Which does not negate all the comments above. David Mark is
definitely right that you're best bet would probably be to use related
ids. But even the rotation function is screwy. This, though is one
way you can reuse the function.

-- Scott
 
R

Ren

Yes.

    function changeText(elt)
    {
      oldHTML = document.getElementById(elt).innerHTML ;
      newHTML = "<b style='-moz-transform:rotate(90deg)'>" + oldHTML +
"</b>" ;
      document.getElementById(elt).innerHTML = newHTML ;
    }

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

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

Which does not negate all the comments above.  David Mark is
definitely right that you're best bet would probably be to use related
ids.  But even the rotation function is screwy.  This, though is one
way you can reuse the function.

  -- Scott
Click to expand...

Works like a charm, Scott. Thanks. I had forgotten how to reuse
functions and you helped me to remember.

Yes. I'll want to generate an array of para[0], para[1], etc...

This is for a game. Each new piece that is generated will have the
ability to be rotated 90 degrees upon clicking the piece.

How do I go about that?
 
S

Scott Sauyet

Ren said:
Works like a charm, Scott. Thanks. I had forgotten how to reuse
functions and you helped me to remember.

Yes. I'll want to generate an array of para[0], para[1], etc...

This is for a game. Each new piece that is generated will have the
ability to be rotated 90 degrees upon clicking the piece.

How do I go about that?
Click to expand...

Attach event handlers to the DOM elements representing your pieces
that listen for click events on the piece and pass the DOM element to
a rotate function.

However, it sounds as though you might be in over your head. You
probably should spend some time with Javascript basics before trying
to use it for any complicated user interfaces. David Flanagan's book
is pretty good for this.

Good luck,

-- Scott
 
R

Ren

Ren said:
Works like a charm, Scott. Thanks. I had forgotten how to reuse
functions and you helped me to remember.
Click to expand...
Yes. I'll want to generate an array of para[0], para[1], etc...
Click to expand...
This is for a game. Each new piece that is generated will have the
ability to be rotated 90 degrees upon clicking the piece.
Click to expand...
How do I go about that?
Click to expand...

Attach event handlers to the DOM elements representing your pieces
that listen for click events on the piece and pass the DOM element to
a rotate function.

However, it sounds as though you might be in over your head.  You
probably should spend some time with Javascript basics before trying
to use it for any complicated user interfaces.  David Flanagan's book
is pretty good for this.

Good luck,

  -- Scott
Click to expand...

Thanks. I'm looking into addEventListener to attach the event handlers
to each element. I now know what key words to search for in order to
find other examples.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Why doesn't the function get called? 1
Script stops working when using variables to save time typing... 4
How do I output this recursive function correctly to a web browser? 2
Image not changing between "mute" & "un-mute" images. 5
Graph of quadratic function with CanvasRenderingContext2D 2
I Need Help with making a function that draws in a canvas using location data. 1
How to save JSON Data to a file using fetch() api? 2
How to properly insert a landing page within same container beneath an image element? 0

Members online

No members online now.
Total: 87 (members: 1, guests: 86)
Robots: 164

Forum statistics

Threads
473,995
Messages
2,570,230
Members
46,819
Latest member
masterdaster

Latest Threads

Top