JavaScriptを押したときに画像が切り替わる

私はJavaScriptの初心者です。私が作っているtic-tac-toeのウェブサイトにそれを適用したいと思います。私はHTMLテーブルを使ってボードを作った。私はそれが最初に、ボードは明確であるようにしたいです。次に、セルを1回クリックすると、「x」の画像が表示されます。セルを2回クリックすると、「o」の画像が表示されます。JavaScriptを押したときに画像が切り替わる

私が作った表のHTMLとCSSです。

h1 { 
 
    text-align: center; 
 
    color: #003b4d; 
 
    font-family: verdana, sans-serif; 
 
} 
 

 
p { 
 
    text-align: center; 
 
    font-style: italic; 
 
    font-family: verdana, sans-serif; 
 
    font-size: 12px; 
 
} 
 

 
table { 
 
    width: 100%; 
 
    border: 1px solid black; 
 
    border-collapse: collapse; 
 
} 
 

 
td { 
 
    border: 1px solid black; 
 
    width: 50px; 
 
    height: 50px; 
 
}

<head> 
 
    <title>SUPERTAC</title> 
 
</head> 
 

 
<body> 
 

 
    <div id="title"> 
 
    <h1> 
 
     Strategic Tic-Tac-Toe 
 
    </h1> 
 
    </div> 
 
    <div id="lorem-ipsum"> 
 
    <p> 
 
     Lorem ipsum dolor sit amet, urna interdum nibh sit volutpat, euismod iaculis arcu eros orci, ut lobortis risus urna, eros scelerisque dolor pellentesque dapibus fames, posuere erat quam mi curabitur. 
 
    </p> 
 
    </div> 
 

 
    <div class="grid"> 
 
    <!---turn pictures into buttons---> 
 
    <table class="strategic"> 
 
     <tr> 
 
     <td> 
 
      <table> 
 
      <tr> 
 
       <td></td> 
 
       <td></td> 
 
       <td></td> 
 
      </tr> 
 
      <tr> 
 
       <td></td> 
 
       <td></td> 
 
       <td></td> 
 
      </tr> 
 
      <tr> 
 
       <td></td> 
 
       <td></td> 
 
       <td></td> 
 
      </tr> 
 
      </table> 
 
     </td> 
 
     <td> 
 
      <table> 
 
      <tr> 
 
       <td></td> 
 
       <td></td> 
 
       <td></td> 
 
      </tr> 
 
      <tr> 
 
       <td></td> 
 
       <td></td> 
 
       <td></td> 
 
      </tr> 
 
      <tr> 
 
       <td></td> 
 
       <td></td> 
 
       <td></td> 
 
      </tr> 
 
      </table> 
 
     </td> 
 
     <td> 
 
      <table> 
 
      <tr> 
 
       <td></td> 
 
       <td></td> 
 
       <td></td> 
 
      </tr> 
 
      <tr> 
 
       <td></td> 
 
       <td></td> 
 
       <td></td> 
 
      </tr> 
 
      <tr> 
 
       <td></td> 
 
       <td></td> 
 
       <td></td> 
 
      </tr> 
 
      </table> 
 
     </td> 
 
     </tr> 
 
     <tr> 
 
     <td> 
 
      <table> 
 
      <tr> 
 
       <td></td> 
 
       <td></td> 
 
       <td></td> 
 
      </tr> 
 
      <tr> 
 
       <td></td> 
 
       <td></td> 
 
       <td></td> 
 
      </tr> 
 
      <tr> 
 
       <td></td> 
 
       <td></td> 
 
       <td></td> 
 
      </tr> 
 
      </table> 
 
     </td> 
 
     <td> 
 
      <table> 
 
      <tr> 
 
       <td></td> 
 
       <td></td> 
 
       <td></td> 
 
      </tr> 
 
      <tr> 
 
       <td></td> 
 
       <td></td> 
 
       <td></td> 
 
      </tr> 
 
      <tr> 
 
       <td></td> 
 
       <td></td> 
 
       <td></td> 
 
      </tr> 
 
      </table> 
 
     </td> 
 
     <td> 
 
      <table> 
 
      <tr> 
 
       <td></td> 
 
       <td></td> 
 
       <td></td> 
 
      </tr> 
 
      <tr> 
 
       <td></td> 
 
       <td></td> 
 
       <td></td> 
 
      </tr> 
 
      <tr> 
 
       <td></td> 
 
       <td></td> 
 
       <td></td> 
 
      </tr> 
 
      </table> 
 
     </td> 
 
     </tr> 
 
     <tr> 
 
     <td> 
 
      <table> 
 
      <tr> 
 
       <td></td> 
 
       <td></td> 
 
       <td></td> 
 
      </tr> 
 
      <tr> 
 
       <td></td> 
 
       <td></td> 
 
       <td></td> 
 
      </tr> 
 
      <tr> 
 
       <td></td> 
 
       <td></td> 
 
       <td></td> 
 
      </tr> 
 
      </table> 
 
     </td> 
 
     <td> 
 
      <table> 
 
      <tr> 
 
       <td></td> 
 
       <td></td> 
 
       <td></td> 
 
      </tr> 
 
      <tr> 
 
       <td></td> 
 
       <td></td> 
 
       <td></td> 
 
      </tr> 
 
      <tr> 
 
       <td></td> 
 
       <td></td> 
 
       <td></td> 
 
      </tr> 
 
      </table> 
 
     </td> 
 
     <td> 
 
      <table> 
 
      <tr> 
 
       <td></td> 
 
       <td></td> 
 
       <td></td> 
 
      </tr> 
 
      <tr> 
 
       <td></td> 
 
       <td></td> 
 
       <td></td> 
 
      </tr> 
 
      <tr> 
 
       <td></td> 
 
       <td></td> 
 
       <td></td> 
 
      </tr> 
 
      </table> 
 
     </td> 
 
     </tr> 
 
    </table> 
 

 
    <div class="directions"> 
 
     <p> 
 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor 
 
     in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
 
     </p> 
 
    </div> 
 

 
    </div> 
 
</body>

私はJavaScriptを使用する方法を学んでいますので、さらに良いでしょうちょうどCSSとHTMLを使ってそれを行うための方法があります。ありがとうございました。

出典

2017-04-30 A.I.

を助けるべきである私達にあなたのコードをしてください表示 –

私は私がこれまで持っているというのが私のすべてのコードを追加しました。 @AlonEitan –

これは、あなた

var currentPlayer = 1; 

window.onload = function() { 
    var tags = document.getElementsByTagName("td"); 

    for (i = 0; tags.length > i; i++) { 
     // add event for every tag 
     tags[i].addEventListener('click', function() { 

      // chack the cell is empty 
      if (isEmpty(this)) 
       setCharacter(this); 
      else 
       alert('cell is not empty'); 

     }); 
    } 

} 

function isEmpty(element) { 
    if (element.innerText.length > 0) 
     return false; 
    else 
     return true; 
} 

function setCharacter(element) { 
    if (currentPlayer == 1) { 
     element.innerText = 'X'; 
     currentPlayer = 2; 
    } 
    else { 
     element.innerText = 'O'; 
     currentPlayer = 1; 
    } 
}

出典

2017-04-30 20:16:06

$(function(){ 
 
    
 
    $(".icon").click(function(e){ 
 
     e.preventDefault(); 
 
     
 
     var icon = $(this).find("i"); 
 
     
 
     if(icon.is(":visible")){ 
 
     if(icon.hasClass('fa-close')){ 
 
      icon.toggleClass('fa-circle-o'); 
 
     } 
 
     else{ 
 
      icon.toggleClass("fa-close"); 
 
     } 
 
     }else{ 
 
     icon.show(); 
 
     } 
 
     
 
    }); 
 
    
 
});

.icon{ 
 
    text-decoration: none; 
 
    color: #000; 
 
    display: inline-block; 
 
    width: 40px; 
 
    height: 40px; 
 
    border: 1px solid black; 
 
    box-sizing: border-box; 
 
    padding: .6em .7em; 
 
} 
 
.icon i{ 
 
    display: none; 
 
}


 

 
<!-- begin snippet: js hide: false console: true babel: false -->

出典

2017-04-30 20:05:39

JavaScriptを押したときに画像が切り替わる

答えて

関連する問題