2017-03-11 16 views
0

これは、ターゲットdivが上に乗ったときにボーダーとバックラウンドの色を変更するだけのシンプルなコードです。どの色がドラッグされているかによって色が変わり、ondragstartを決定する必要があります。しかし、何も起こらない、実際に私のカーソルは許可されていないものです。 (それを通る線で円)それでは、何が問題なのですか。ondragoverイベントが動作しない

<!DOCTYPE HTML> 
<html> 
<head> 
    <title>Play four-in-a-Row</title> 
    <meta charset=ütf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
    <link rel="stylesheet" href="styles.css"> 
</head> 
<div class="container-fluid"> 
<body onload="boardSetup()"> 
    <div id="header" > 
    <h1 id = "Main">Four-in-a-Row</h1> 
    </div> 
    <hr> 
    <div id = "drop"> 
     <div class="row"> 
     <div class = "col-xs-1" ></div> 
      <div class = "col-xs-1" ></div> 
      <div class = "square col-xs-1" data-toggle="tooltip" title = "Column 1" ondragover = "dragOver(event)" ></div> 
      <div class = "square col-xs-1" data-toggle="tooltip" title = "Column 2" ondragover = "dragOver(event)"></div> 
      <div class = "square col-xs-1" data-toggle="tooltip" title = "Column 3" ondragover = "dragOver(event)"></div> 
      <div class = "square col-xs-1" data-toggle="tooltip" title = "Column 4" ondragover = "dragOver(event)"></div> 
      <div class = "square col-xs-1" data-toggle="tooltip" title = "Column 5" ondragover = "dragOver(event)"></div> 
      <div class = "square col-xs-1" data-toggle="tooltip" title = "Column 6" ondragover = "dragOver(event)"></div> 
      <div class = "square col-xs-1" data-toggle="tooltip" title = "Column 7" ondragover = "dragOver(event)"></div> 
     </div> 
    </div> 
    <hr> 
    <div id="board" > 
     <div class="row"> 
      <div class = "col-xs-1" ></div> 
      <div class = "col-xs-1" ></div> 
      <div class = "square col-xs-1" ></div> 
      <div class = "square col-xs-1" ></div> 
      <div class = "square col-xs-1" ></div> 
      <div class = "square col-xs-1" ></div> 
      <div class = "square col-xs-1" ></div> 
      <div class = "square col-xs-1" ></div> 
      <div class = "square col-xs-1" ></div> 
     </div> 
     <div class="row"> 
      <div class = "col-xs-1" ></div> 
      <div class = "col-xs-1" ></div> 
      <div class = "square col-xs-1" ></div> 
      <div class = "square col-xs-1" ></div> 
      <div class = "square col-xs-1" ></div> 
      <div class = "square col-xs-1" ></div> 
      <div class = "square col-xs-1" ></div> 
      <div class = "square col-xs-1" ></div> 
      <div class = "square col-xs-1" ></div> 
     </div> 
     <div class="row"> 
      <div class = "col-xs-1" ></div> 
      <div class = "col-xs-1" ></div> 
      <div class = "square col-xs-1" ></div> 
      <div class = "square col-xs-1" ></div> 
      <div class = "square col-xs-1" ></div> 
      <div class = "square col-xs-1" ></div> 
      <div class = "square col-xs-1" ></div> 
      <div class = "square col-xs-1" ></div> 
      <div class = "square col-xs-1" ></div> 
     </div> 
     <div class="row"> 
      <div class = "col-xs-1" ></div> 
      <div class = "col-xs-1" ></div> 
      <div class = "square col-xs-1" ></div> 
      <div class = "square col-xs-1" ></div> 
      <div class = "square col-xs-1" ></div> 
      <div class = "square col-xs-1" ></div> 
      <div class = "square col-xs-1" ></div> 
      <div class = "square col-xs-1" ></div> 
      <div class = "square col-xs-1" ></div> 
     </div> 
     <div class="row"> 
      <div class = "col-xs-1" ></div> 
      <div class = "col-xs-1" ></div> 
      <div class = "square col-xs-1" ></div> 
      <div class = "square col-xs-1" ></div> 
      <div class = "square col-xs-1" ></div> 
      <div class = "square col-xs-1" ></div> 
      <div class = "square col-xs-1" ></div> 
      <div class = "square col-xs-1" ></div> 
      <div class = "square col-xs-1" ></div> 
     </div> 
     <div class="row"> 
      <div class = "col-xs-1" ></div> 
      <div class = "col-xs-1" ></div> 
      <div class = "square col-xs-1" ></div> 
      <div class = "square col-xs-1" ></div> 
      <div class = "square col-xs-1" ></div> 
      <div class = "square col-xs-1" ></div> 
      <div class = "square col-xs-1" ></div> 
      <div class = "square col-xs-1" ></div> 
      <div class = "square col-xs-1" ></div> 
     </div> 

    </div> 
    <div class= "piece"> 
      <img src= "player_1.png" alt= "Player 1 piece" height = 15% width = 15% id = "player1" data-toggle="tooltip" title = "Player one's piece" class ="player1 piece" draggable= "true" ondragstart ="dragStart(event)" > </img> 
      <img src= "player_2.png" alt= "Player 2 piece" height = 15% width = 15% id = "player2" data-toggle="tooltip" title = "Player two's piece" class = "player2 piece" draggable= "true" ondragstart ="dragStart(event)"> </img>   
    </div> 
    <script> 
    var map; 
    var dragged = 0; 
     function boardSetup(){ 
      var board=document.getElementsByClassName("square"); 
      var blank = "<img src = blank.png alt= blank class = blank>"; 
      for(var x = 0; x < board.length; x++){ 
       board[x].innerHTML(blank) 
      } 

      document.getElementById("board").innerHTML=board; 
      var temp2 = document.getElementsByClassName("blank"); 
      for(var z in temp2){ 
       temp2[z].className += " piece"; 
      } 
     } 

     function gameStart(){ 
     } 


     $(document).ready(function(){ 
      $('[data-toggle="tooltip"]').tooltip();  
     }); 

     function dragStart(event) { 
      event.dataTransfer.setData("text", event.target.id); 
      if(event.target.id == "player1") 
       dragged = 1; 
      else if(event.target.id){ 
       dragged = 2; 
      } 
     } 

     function dragOver(event){ 
      event.preventDefault(); 
      if(draaged = 1){ 
       event.target.style.border = "blue"; 
       event.target.style.background-color = "#59F2F7";  
      }else if(draaged = 2){ 
       event.target.style.border-clolor = "red"; 
       event.target.style.background-color = " #F75D59"; 
      } 
     } 


</script> 
<input type="button" onclick="boardSetup()" value="Reset" class="btn btn-danger btn-block" > </input> 
</div> 
</body> 

<footer> 
    <hr> 
    <a href="../index.html">&lt;- Back to launch page</a> 
    <hr> 
    <p style= "text-align: right"> done by <br>Justin Michel <br> u14369852</p> 
    <hr> 
</footer> 

+0

debuiggingにコンソールを使用していますか? event.target.style.border-clolor = "red"; //キャメルケースとミスペル event.target.style.background-color = "#59F2F7"; // camelcasedする必要があります – konradluka

答えて

0

次の文は、有効なJavaScriptコードではありません。それらは、意味を持たない式に値を代入しようとする代入式として解釈されます。あなたは、対応するキャメルケースの変種で、次の行を交換する必要があります:

  • event.target.style.border-clolor = "red";
  • event.target.style.background-color = " #F75D59";

をと交換してください:等々

event.target.style.backgroundColor = "#59F2F7";

そして、 。 (そして、clolorのようなものはありません)

もう一つのエラーはboard[x].innerHTML(blank)-innerHTMLは機能ではありません。これはプロパティで、ここにドキュメントへのリンクがあります。https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML

コンソールを開くと、これらのエラーの両方を見つけることができます。コンソールは、コード内の違反行にジャンプするリンクを提供し、デバッグを容易にします。完全な解決策ではないかもしれませんが、それらを修正することは、コードが機能するために必要です。参照されているスタイルシートに質問は表示されないので、質問に完全に回答することはできません(スタイルシートのスタイル定義によってカーソルがブロックされているなど)。

投稿したコードには、ドラッグイベントに直接関連していない可能性がありますが、引き上げる価値はありますが、さらに問題があります。

img要素は空(空)要素です:HTMLでは、空の要素に終了タグを使用すると通常無効ですで閉じられていませんが、開始タグには"/>"があります。 input要素でも同じです。ここではドキュメントへのリンクは次のとおりです。https://developer.mozilla.org/en-US/docs/Glossary/Empty_element

bodyタグは、それはそれは良い習慣ではないの作品も、div内にネストされることになっていません。 https://www.w3.org/TR/html5/sections.html#the-body-element

関連する問題