当javascript中的输入发生变化时,在html textarea中自动更改文本

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

本文关键字:textarea html 文本 输入 javascript 变化      更新时间:2023-09-26

它工作得很好,但是当鼠标移过去时,它只改变了一次。onmouseover如何多次工作?我的意思是当文本数组发生变化时

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

如果不看你的代码,很难理解你在哪里卡住了,但是根据你的描述,我开发了这个代码。看看这个,我希望它能帮助你。

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

希望我正确理解了你的问题。我稍微调整了一下你的原始代码来清理它,所以现在每次checkText()被调用时,它都会将任何不是"No Change"的值写入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>

在我的示例中,代码只在单击按钮时运行,但如果您希望它以间隔运行,例如每秒,请阅读这里的setInterval()函数。

只是一个旁注:记住声明变量,并且只在你需要它们的范围内声明它们(即,如果你只在for循环中需要它们,则在for循环中声明它们)。