2017-03-02 8 views
-1

コードの目的は、配列の文字をクリックしてテキストボックスに表示することです。配列は、キーボードのような文字でできています。私は試みたが、私は何が間違っているのか分からない。誰でも助けてくれますか?クリックしてTextBoxにテキストを追加

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

わからない機能を遅らせたい期間を指定する必要があるのsetTimeout

;'私が今までしたすべての有効なJavaScriptのようには見えません見た。おそらくそれ以上の問題ですが、それを修正する必要があります。 – chairmanmow

答えて

0

このコードは動作するはずです:私はタイムアウトを追加し、テキストエリアに値を追加するコードを必要

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

。この=あなたはこのコードの一部は、すべての変数1 `約あるかwindow.setTimeout(function(){},2000); //2000 means 2 seconds delay

+0

@Umarそれは何か問題があった場合私に知らせてください。 – alireza

+0

これはありがとう – Umar

0

私はあなたの<textarea><body>タグに配置する必要があります...あなたのコードは、他の問題のために働いていないかもしれないが、これは固定する必要があるべきだと思います。

+0

私はそれをしました。 – Umar

0

あなたの最初の問題ではなく、あなたはそれがあることを期待しているオブジェクトよりも、そのような場合(またはstrictモードでundefined)に窓に等しい、setTimeoutthis参照して可能性があります。

variable one=this;が正しく宣言されていません。

Alltextは、"で引用してください。それ以外の場合は、存在しないその名前の変数を参照しようとしています。

この性質のこのコードにはいくつかの問題があります。問題のページをブラウザで開いてDevtoolsのコードを調べることを強くお勧めします。これは、これらのエラーの大部分を事前に表示するはずです。そこから、期待どおりの方法で動作しないコードのセクションを操作することができます。

+0

私はコード全体を削除しました。テキストエリアにテキストを追加するために入力したものです。どのように表示することができますか?ありがとう – Umar

関連する問題