Question

代码的目的是在单击数组中的字母时，它们应显示在文本框中。阵列由字母组成，如键盘。我尝试过，但我不知道自己做错了什么。有人可以帮忙吗？

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

Answer 1

我认为您的<textarea>应放在<body>代码中...可能是您的代码由于其他问题而无效，但这应该是必须修复的。

Answer 2

你的第一个问题可能是this中的setTimeout引用，它等于那种情况下的窗口（或严格模式下的undefined），而不是你的对象我期待它成为。

variable one=this;未正确声明。

Alltext应引用";否则，它试图引用一个不存在该名称的变量。

这种性质的代码存在许多问题。我强烈建议您在浏览器中打开相关页面并检查Devtools中的代码，这些代码应该提前显示大部分错误。从那里开始，您可以按照预期的方式处理代码部分。

Answer 3

此代码应该有效：

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

我添加了超时和所需的代码来为textarea添加值。

setTimeout需要指定延迟函数window.setTimeout(function(){},2000); //2000 means 2 seconds delay

的时间

单击时将文本添加到TextBox

3 个答案: