CODEWITHSUNDEEP
javascriptcsshtml
Sunil M
Sunil M

Reputation: 5

text change inHTML textarea automatically when ever there is a input change in javascript

It is working perfectly, but onmouseover, its changing only once. How can onmouseover works multiple times? I mean when ever text arrays changed

<html> 
<head> 
<script> 
function myFunction() 
{ 
var i; 
var text = ["No Change", "No Change", "Update1", "No Change", "Update2"]; 
text2=""; 
for (i=0; i<5; i++) 
{ 
if(text[i]=="No Change") 
{ 
continue; 
} 
else 
{ 
text2 = text2+text[i]+"\n"; 
} 
} 
document.getElementById("myTextarea").value = text2;
 }
 </script>
 </head>
 <body>
 <textarea id="myTextarea" onmouseover="myFunction()" cols="100" style="color:blue;" readonly> No change </textarea> 
</body>
 </html>

Upvotes: 0

Views: 726

Answers (2)

grahamhoyes
grahamhoyes

Reputation: 321

Hopefully I understood your question properly. I slightly tweaked your original code to clean it up, so now every time checkText() is called it will write any values that aren't "No Change" to the textarea.

<html>
    <head>
        <script>
        var text = ["No Change", "No Change", "Update1", "No Change", "Update2"]; 
        var text2=""; //don't forget to declare variables
        function checkText() {
            var flag = 0;
            for (var i=0; i<text.length; i++) { //unnecessary to declare i outside of loop if not used elsewhere
                if(text[i]!="No Change") { 
                    text2 += text[i] + " "; //A simpler way of doing "text = text + something" | "\n" is new line
                    flag = 1;
                } 
            } 
            if (flag == 1) {
                document.getElementById("myTextarea").value = text2;
            } else {
                document.getElementById("myTextarea").value = "No change";
            }
        }
        </script>
    <head>
    <body>
    <textarea id="myTextarea" cols="100" readonly> No change </textarea>
    <button onClick="checkText()">Check Text</button>
    </body>
</html>

In my example the code only runs on the click of a button, but if you would like it to run at an interval, every second for example, read about the setInterval() function here.

Just a side note: remember to declare variables, and only declare them at the scope you need them (i.e. if you only need them within a for-loop, declare them within the for-loop).

Upvotes: 0

Nish
Nish

Reputation: 738

It is little bit difficult to understand where you got stuck without seeing your code, but from your description, I developed this code. Check this and I hope it will help you.

<html>

<body>

    <input type="text" id="a[0]" value="No Change"><br>
    <input type="text" id="a[1]" value="No Change"><br>
    <input type="text" id="a[2]" value="No Change"><br>
    <input type="text" id="a[3]" value="No Change"><br>
    <input type="text" id="a[4]" value="No Change"><br>
    <input type="text" id="a[5]" value="No Change"><br>
    <input type="text" id="a[6]" value="No Change"><br>
    <input type="text" id="a[7]" value="No Change"><br>
    <input type="text" id="a[8]" value="No Change"><br>
    <input type="text" id="a[9]" value="No Change"><br><br>

    <input type="button" onclick="change_text_area()" value="Check Now" /><br><br>

    <textarea id="text_area" rows="4" cols="50" ></textarea>


    <!-- JAVASCRIPT CODE BEGINS -->

    <script>

    function change_text_area()
    {
        var flag=0;
        var str="";
         for (i = 0; i < 10; i++) 
         { 
                var inp=document.getElementById("a["+i+"]").value;
                if(inp!="No Change")
                {
                    str=str+" "+inp;
                    flag=1;
                }   
         }

        if(flag==1)
        {
            document.getElementById("text_area").value=str;
        }
        else
        {
            document.getElementById("text_area").value="No Change";
        }
   }
  </script>

  <!-- JAVASCRIPT CODE ENDS -->

</body>

Upvotes: 1

Related Questions