HTML textarea content will update automatically whenever there is an input change in JavaScript

Question

HTML textarea content will update automatically whenever there is an input change in JavaScript

Everything seems to be working as expected, but I noticed that the onmouseover event only triggers once. Is there a way to make it work multiple times, i.e., every time the text array changes?

<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>

javascript css html

Answer 1

Answer №1

It can be a challenge to pinpoint where you are facing issues without looking at your code directly. However, based on your explanation, I have come up with this code snippet. Please review it and hopefully it will provide some assistance.

<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>

Answer 2

It can be a challenge to pinpoint where you are facing issues without looking at your code directly. However, based on your explanation, I have come up with this code snippet. Please review it and hopefully it will provide some assistance.

<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>

Answer 3

Answer №2

I hope I've grasped your query correctly. I've made some minor adjustments to your original code to tidy it up. Now, whenever checkText() is invoked, it will populate the textarea with any values that are not "No Change".

<html>
    <head>
        <script>
        var text = ["No Change", "No Change", "Update1", "No Change", "Update2"]; 
        var text2=""; //Make sure to declare variables
        function checkText() {
            var flag = 0;
            for (var i=0; i<text.length; i++) { //No need to declare i outside the loop if not used elsewhere
                if(text[i]!="No Change") { 
                    text2 += text[i] + " "; //A more concise way of saying "text = text + something" | "\n" indicates a 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 this scenario, the code will only execute upon clicking a button. However, if you wish for it to run continuously at set intervals, for instance every second, refer to the setInterval() function here.

Just a quick tip: remember to define variables and limit their scope to where they are needed (e.g., declare them within a for-loop if they are only required there).

Answer 4

I hope I've grasped your query correctly. I've made some minor adjustments to your original code to tidy it up. Now, whenever checkText() is invoked, it will populate the textarea with any values that are not "No Change".

<html>
    <head>
        <script>
        var text = ["No Change", "No Change", "Update1", "No Change", "Update2"]; 
        var text2=""; //Make sure to declare variables
        function checkText() {
            var flag = 0;
            for (var i=0; i<text.length; i++) { //No need to declare i outside the loop if not used elsewhere
                if(text[i]!="No Change") { 
                    text2 += text[i] + " "; //A more concise way of saying "text = text + something" | "\n" indicates a 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 this scenario, the code will only execute upon clicking a button. However, if you wish for it to run continuously at set intervals, for instance every second, refer to the setInterval() function here.

Just a quick tip: remember to define variables and limit their scope to where they are needed (e.g., declare them within a for-loop if they are only required there).

HTML textarea content will update automatically whenever there is an input change in JavaScript

Answer №1

Answer №2

Similar questions

The selected value from the array in the scope model is not appearing correctly in the UI dropdown menu

Does ExpressJS always terminate with JSON by default?

Stunning CSS Image Showcase

Ways to center text in a div using vertical alignment

Replicate the functionality of a backend API using AngularJS

Retrieving Dropdown Value in Bootstrap 5: How to Obtain the Selected Item's Value from the Dropdown Button

Exploring audio analysis across different platforms using the power of the Web Audio API

Are there any user interface frameworks available that can replicate the aesthetic of a Mac application?

Switch out 2 Bootstrap columns for 2 concealed columns with just a click. Utilizing Rails 4 and Bootstrap

What is the best way to access the CSS font-size property using JavaScript?

Using a function as a prop in Vue js to retrieve data from an API

Is it possible to observe a collection of variables that are not within the current scope, but are still being utilized in Angular?

When attempting to execute the delete script, some errors were encountered

Is it possible to bundle MongoDB into an Electron application?

Check whether the username variable is blank; if it is, then refrain from navigating to page2.php

The alignment of flexNav.js submenus is not consistent

Tips for adjusting the color of a <a> tag upon clicking, which remains unchanged until the URL is modified

Having trouble with the fancybox form

Using data-image as the source for Bootstrap Modal

Dividing blocks of text into individual sentences