Javascript 单击后将文本添加到文本框_Javascript

Javascript 单击后将文本添加到文本框

javascript

Javascript 单击后将文本添加到文本框,javascript,Javascript,代码的用途是当单击数组中的字母时，它们应该显示在文本框中。数组由字母组成，就像键盘一样。我试过了，但我不知道我做错了什么。有人能帮忙吗 <html> <head> <body> <textarea id="Alltext"></textarea> <div id = "playground"> </div> </body>

代码的用途是当单击数组中的字母时，它们应该显示在文本框中。数组由字母组成，就像键盘一样。我试过了，但我不知道我做错了什么。有人能帮忙吗

<html>

    <head>

    <body>
  <textarea id="Alltext"></textarea>
        <div id = "playground">


        </div>

    </body>




    <script>

        var Item = function(name){

            this.name = name;
            var div = document.createElement("div");

            div.className = "";
            div.innerHTML = name;
            this.div = div;
            this.appendTo = function (parent){
            parent.append(this.div);

            }

            this.setName = function(newName){
                this.div.innerHTML = newName;
                this.name = newName;
            } 



            this.div.addEventListener('click', function(event){


                //change the color of the item for 2 seconds
                var clickedElement = event.target;

                clickedElement.classList.add("clicked");

                window.setTimeout(function(){
                clickedElement.classList.remove("clicked");


                });


            });



        }

        var names = ["Q","W", "E", "R","T","Y", "U","I","O","P","A","S","D","F","G","H","J","K","L",];
        var playground = document.getElementById("playground");

        for(var i = 0; i < names.length; i++){

            var myItem = new Item(names[i]);
            myItem.appendTo(playground);            


            }


    </script>
</html>


变量项=函数（名称）{
this.name=名称；
var div=document.createElement（“div”）；
div.className=“”；
div.innerHTML=名称；
this.div=div；
this.appendTo=函数（父级）{
parent.append（this.div）；
}
this.setName=函数（newName）{
this.div.innerHTML=newName；
this.name=newName；
} 
this.div.addEventListener（'click'，函数（事件）{
//更改项目的颜色2秒钟
var clickedElement=event.target；
clickedElement.classList.add（“单击”）；
setTimeout（函数（）{
clickedElement.classList.remove（“单击”）；
});
});
}
变量名称=[“Q”、“W”、“E”、“R”、“T”、“Y”、“U”、“I”、“O”、“P”、“A”、“S”、“D”、“F”、“G”、“H”、“J”、“K”、“L”]；
var playway=document.getElementById（“playway”）；
对于（var i=0；i

我认为您的

应该放在

标签中。。。可能是由于其他问题，您的代码无法工作，但这应该得到修复。

您的第一个问题可能是

setTimeout

中的

this

引用，这相当于在这种情况下的窗口（或在严格模式下为

未定义的

），而不是您期望的对象

variable one=this未正确声明
Alltext
应在中引用“
”；否则，它试图引用一个不存在的变量
这种性质的代码存在许多问题。我强烈建议您在浏览器中打开有问题的页面，并在Devtools中检查代码，这将提前向您显示这些错误的大部分。从那里，您可以逐步完成代码中未按预期方式工作的部分。
此代码应该rk:
<script>

    var Item = function(name){

        this.name = name;
        var div = document.createElement("div");

        div.className = "";
        div.innerHTML = name;
        this.div = div;
        this.appendTo = function (parent){
        parent.append(this.div);

        }

        this.setName = function(newName){
            this.div.innerHTML = newName;
            this.name = newName;
        } 



        this.div.addEventListener('click', function(event){

            //change the color of the item for 2 seconds
            var clickedElement = event.target;
            var value = document.getElementById('Alltext').value;
            var newValue = value+event.target.innerText;
            document.getElementById('Alltext').value=newValue;

            clickedElement.classList.add("clicked");

            window.setTimeout(function(){
            clickedElement.classList.remove("clicked");


            }, 2000);


        });



    }

    var names = ["Q","W", "E", "R","T","Y", "U","I","O","P","A","S","D","F","G","H","J","K","L",];
    var playground = document.getElementById("playground");

    for(var i = 0; i < names.length; i++){

        var myItem = new Item(names[i]);
        myItem.appendTo(playground);            


        }


</script>


变量项=函数（名称）{
this.name=名称；
var div=document.createElement（“div”）；
div.className=“”；
div.innerHTML=名称；
this.div=div；
this.appendTo=函数（父级）{
parent.append（this.div）；
}
this.setName=函数（newName）{
this.div.innerHTML=newName；
this.name=newName；
} 
this.div.addEventListener（'click'，函数（事件）{
//更改项目的颜色2秒钟
var clickedElement=event.target；
var value=document.getElementById（'Alltext'）.value；
var newValue=value+event.target.innerText；
document.getElementById（'Alltext'）。value=newValue；
clickedElement.classList.add（“单击”）；
setTimeout（函数（）{
clickedElement.classList.remove（“单击”）；
}, 2000);
});
}
变量名称=[“Q”、“W”、“E”、“R”、“T”、“Y”、“U”、“I”、“O”、“P”、“A”、“S”、“D”、“F”、“G”、“H”、“J”、“K”、“L”]；
var playway=document.getElementById（“playway”）；
对于（var i=0；i

我添加了超时和必要的代码来为textarea添加值
setTimeout需要指定要将函数window.setTimeout（function（）{}，2000）延迟多长时间；//2000意味着2秒延迟
不确定这部分代码的全部内容；

看起来不像我见过的任何有效的javascript。可能还有更多的问题，但你需要解决。我已经删除了整个代码集，我键入这些代码是为了在文本区域中添加文本，你能告诉我怎么做吗nks@Umar如果有任何问题，请告诉我。