Wrapping text in a form?

[taypandt]

I'm not exactly sure what the best way to go about this is, but I'm building a page that cycles through images and text using the setInterval() method. I've got the text and images side by side in a table row, with the text on the left, but I'm having trouble getting the text to wrap rather than being on one single long line.

<td width="200" rowspan="6" align="right" valign="middle">
        <form action="" name="toolBox">
            <p class="wrap"><input type="text" name="definition" size="50" width="20"
                style="color:black;font-weight:bold; border-style:none; 
                border-color: inherit; border-width:medium; background-color:
                Transparent; width: 200; word-wrap: break-word;" value="'Sed at mauris lorem, id viverra nulla. Donec egestas odio vitae felis fermentum accumsan. Integer sit amet erat tortor, eget dapibus quam.'" /></p>
        
</td>
<td width="800" rowspan="6" align="center" style="margin-top:50px">
        <img src="images/powertool1.jpg" width="300" height="300" id="toolpics" alt="Tool Images" border="7px" style="border-color:#5F2601"/>
            <p><input type="text" name="toolName" size="50"
                style="color:black; text-align:right; font-weight:bold; border-style:none; 
                border-color: inherit; border-width:medium; background-color:
                Transparent" value="Power Drill" /></p>
        </form>
</td>

I know I could wrap the text if it weren't set up as an input field, but the problem is that I need the text to also be able to cycle when called by the function being used by setInterval. Here's my function as it is right now:

    var showTxt="powertext";
    function cycleTxt() {
        if (showTxt == "powertext") {
            document.toolBox.definition.value = "'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec et dui vitae mauris bibendum lobortis at ut mi. Cras nec eleifend tellus'";
            showTxt = "handtext";
        }
        else if (showTxt == "handtext") {
            document.toolBox.definition.value = "'Vivamus quis purus elit, in sodales sem. Donec placerat dignissim dui id scelerisque. Donec lacinia ultricies arcu vitae hendrerit. Nunc ut elit risus.'";
            showTxt = "autotext";
        }
        else if (showTxt == "autotext") {
            document.toolBox.definition.value = "'Sed at mauris lorem, id viverra nulla. Donec egestas odio vitae felis fermentum accumsan. Integer sit amet erat tortor, eget dapibus quam.'";
            showTxt = "powertext";
        }
    }

I feel like I'm not explaining myself very well in this post, so feel free to tell me if I need to give more information or clarification. Thanks in advance!

[xelawho]

I guess the first question is going to be if you want it on various lines, why not use a text area:

<p class="wrap"><textarea name="definition" rows="6" cols="30" style="color:black;font-weight:bold; border-style:none; border-color: inherit; border-width:medium; background-color: Transparent; width: 200; word-wrap: break-word;">'Sed at mauris lorem, id viverra nulla. Donec egestas odio vitae felis fermentum accumsan. Integer sit amet erat tortor, eget dapibus quam.' </textarea></p>

but an even better question is why not make it a div and change its contents using innerHTML

<div id="definition" style="height:50px; width:30px; color:black;font-weight:bold; border-style:none; border-color: inherit; border-width:medium; background-color: Transparent; width: 200; word-wrap: break-word;">'Sed at mauris lorem, id viverra nulla. Donec egestas odio vitae felis fermentum accumsan. Integer sit amet erat tortor, eget dapibus quam.' </div>

...

document.getElementById("definition").innerHTML = "'Lorem ipsum dolor sit amet, etc"

[taypandt]

Awesome, that works, thank you!