upper case and lower case in text area
<p>I have 2 <code>textarea</code> with <code>maxlenghth</code> of <code>25</code>:</p>

<pre><code>&lt;textarea row='5' cols='25' maxlength="200" name="address" id="text1"
          value="text1" onkeyup="MyFunction()"&gt;&lt;/textarea&gt;
&lt;br&gt;&lt;br&gt;
&lt;textarea row='5' cols='25' maxlength="200" name="address1" id="text2"
          value="text2" onkeyup="MyFunction()"&gt;&lt;/textarea&gt;
</code></pre>

<p>If i am entering a lowercase character in 1st <code>textarea</code>,an uppercase character is getting printed and vice versa.But if i am entering a character in second <code>textarea</code>, the answer is not printing in the first <code>textarea</code>. Please help.</p>

<pre><code>function MyFunction() {
    var x1 = document.getElementById("text1").value;
    var x2 = document.getElementById("text2").value;
    var z = '';
    for (i = 0; i &lt; x1.length; i++) {
        y = x1.charAt(i);
        if (y == y.toLowerCase()) {
            z = z + y.toUpperCase();
        } else {
            z = z + y.toLowerCase();
        }
    }
    document.getElementById("text2").value = z;
    var z1 = '';
    for (j = 0; j &lt; x2.length; j++) {
        y1 = x2.charAt(j);
        if (y1 == y1.toLowerCase()) {
            z1 = z1 + y1.toUpperCase();
        } else {
            z1 = z1 + y1.toLowerCase();
        }
    }
    document.getElementById("text1").value = z1;
}
</code></pre>
