JavaScript Forum

**Svartgam** · 10-02-2007, 03:27 AM

I've just started learning W3C DOM and I wrote my first script yesterday that to my happiness worked in Firefox 2.0.0.7 but not in IE 6.0.
The idea for the script is to use a select dropdown list to decide the width of a square.

This is the code in the head:

code:
<script type="text/javascript" language="javascript">

function changeWidth(){
var selObj = document.getElementById("selectWidth");
var selWidth = selObj.options[selObj.selectedIndex].value;
var square = document.getElementById("testSquare");
square.style.width = selWidth;
}

</script>

And this is the code for the body:

code:
<form name=widthForm onChange="changeWidth();">
<select id="selectWidth" name="selectWidth">
<option value='200px'>200</option>
<option value='195px'>195</option>
<option value='190px'>190</option>
<option value='185px'>185</option>
</select>
</form>

<br />
<div id="testSquare" style="width:200px; height:200px;
background:#CCCC66; overflow: hidden;">
In this box there is a lot, and I do mean a lot, of text that
shall change as the width of the box changes.
</div>

Can I get this to work in version 5+ browsers by changing my code?
The problem is probably in the changeWidth() method

Thanks in advance!

**tripy** · 10-02-2007, 03:49 AM

Your problem don't lies in the changeWidth() function.
The problem is that IE don't recognize onchange events on a form, only on the elements of the form.
There is a chart of which browser support which event and where:
http://www.quirksmode.org/js/events_compinfo.html

Change your html by moving the onchange to the select, that way:

HTML Code:

<form name=widthForm >
<select id="selectWidth" name="selectWidth" onChange="changeWidth();">
<option value='200px'>200</option>
<option value='195px'>195</option>
<option value='190px'>190</option>
<option value='185px'>185</option>
</select>
</form>
<script type="text/javascript" language="javascript">

function changeWidth(){
var selObj = document.getElementById("selectWidth");
var selWidth = selObj.options[selObj.selectedIndex].value;
var square = document.getElementById("testSquare");
square.style.width = selWidth;
}

</script>
<br />
<div id="testSquare" style="width:200px; height:200px;
background:#CCCC66; overflow: hidden;">
In this box there is a lot, and I do mean a lot, of text that
shall change as the width of the box changes.
</div>

**Svartgam** · 10-02-2007, 05:30 AM

Works like a charm, much obliged!

**Svartgam** · 10-02-2007, 05:23 PM

I have another DOM-question;

Is it possible to have the user type text into an input field and simultaneously display that text in a div box somewhere else on the page and continuosly update it as the user continues to type and/or erase text?
If so, could anyone pleae point me in the right direction?

P.S.
I don't know what the standard procedure is for posting here since I'm relatively new but instead of creating a new thread about a slightly similar subject I will continue on this one. Should that decision be frowned upon by moderators, please rename this thread D.S.

**tripy** · 06:33 PM

Quote:

I don't know what the standard procedure is

Simply put, create a thread per questions.

Aside this, for what you are looking, you will need to rely on the onkeypress event.
Quite easy:

HTML Code:

<html>
  <body>
    <textarea rows="5" cols="60" onkeypress="javascript:updField(this.value);">Please type your text here</textarea>
    <br/>
    <div id="textTarget" style="width:300px;height:200px;border:1px solid red"></div>
    <script type="text/javascript">
      function updField(txt){
        var trg=document.getElementById('textTarget');
        //those 2 lines to rebuild the carriage return in HTML
        txt=txt.replace(/\r/gi, "");
        txt=txt.replace(/\n/gi, "<br/>");
        trg.innerHTML=txt;
      }
    </script>
  </body>
</html>

**Svartgam** · 10-03-2007, 04:23 AM

Ok, then next time I will crete a new thread.
Thanks for the code tripy, it worked good except there was a delay on the change taking place so I changed to onkeyup and it works like a charm!