Я пытаюсь использовать Javascript для отображения изображения

Question

Я пытаюсь сделать игру с tic tac toe. Я использую образы вместо Xs и Os, поэтому мне нужно заполнить td изображением, когда на него нажимают. Я попытался это:

function makeDuck(place){ 
    //this is just so I know the other methods work 
    alert("duck");    
    //This is the line I need help with 
    window.location.write('<img src="smallDuck.jpg" width="70" height="70"/>'); 
    squares[place] = 1; 
} 

function makeBeaver(place){ 
    //this is just so I know the other methods work 
    alert("beaver"); 
    //This is the line I need help with   
    document.zero.write('<img src="smallBeaver.jpg" width="80" height="80"/>'); 
    squares[place] = 2; 
} 

Answer 1

function makeDuck(place){ 
    // first, we must create a new element in the DOM 
    var img = document.createElement("IMG"); 
    // second, we must assign the right attributes 
    img.src = "smallDuck.jpg"; 
    img.width = "70"; 
    img.height = "70"; 

    // finally, we append it to the document 
    document.body.appendChild(img); 

    squares[place] = 1; 
} 

function makeBeaver(place){ 
    // first, we must create a new element in the DOM 
    var img = document.createElement("IMG"); 
    // second, we must assign the right attributes 
    img.src = "smallBeaver.jpg"; 
    img.width = "80"; 
    img.height = "80"; 

    // finally, we append it to the document 
    document.body.appendChild(img); 

    squares[place] = 2; 
} 

Answer 2

Один из способов сделать это является использование JavaScript, чтобы заменить на источник IMG. Предположим, что у вас есть сетка 3 x 3, каждая ячейка содержит тег <img />. Им все будет нужно уникальное id s.

И у вас будет 3 изображения: blank.jpg, X.jpg и Y.jpg. Все клетки начинают с
<img src='blank.jpg' ... />

Использование Javascript для поиска элемента (getDocumentById (ID)) и установите его свойство src к URI устанавливается как src из X или Y изображений.

Answer 3

Следующие должны получить ты, первые стили:

<style type="text/css"> 
table.game { 
    border: none; 
    border-collapse: collapse; 
} 
table.game td { 
    height: 50px; 
    width: 50px; 
    margin: 0; 
    padding: 0; 
} 
td.topLeft, td.topCenter, td.midLeft, td.midCenter { 
    border-right: 1px solid black; 
    border-bottom: 1px solid black; 
} 

td.topRight, td.midRight { 
    border-bottom: 1px solid black; 
} 

td.botLeft, td.botCenter { 
    border-right: 1px solid black; 
} 

td.botRight { } 

.naught { 
    background-image: url('naught.jpg'); 
} 
.cross { 
    background-image: url('cross.png'); 
} 

</style> 

Тогда HTML для игры

<table class="game" onclick="handleClick(event);"> 
    <tr> 
    <td class="topLeft"> 
    <td class="topCenter"> 
    <td class="topRight"> 
    <tr> 
    <td class="midLeft"> 
    <td class="midCenter"> 
    <td class="midRight"> 
    <tr> 
    <td class="botLeft"> 
    <td class="botCenter"> 
    <td class="botRight"> 
</table> 

Тогда простой скрипт для SWAP изображения:

<script> 
var handleClick = (function() { 
    var count = 0; 

    return function(evt) { 
     var el = evt.target || evt.srcElement; 
     el.className += ' ' + (count++%2? 'naught' : 'cross'); 
    } 
}()); 
</script> 

Обратите внимание, что вам нужно иметь дело с несколькими кликами по одной и той же ячейке (проверьте, имеет ли класс уже значение «ничего» или «крест», и если да, скажите пользователю, чтобы он щелкнул в другом месте) и дайте подсказку, чей ход.