Изменение стиля неизвестного элемента в JavaScript

-2

Я пытаюсь создать игру tic-tac-toe, где пользователь сначала нажимает, какой игрок он хочет быть, затем нажимает на квадрат на доске, где он хочет играть. Проблема, с которой я сталкиваюсь, заключается в изменении фона квадрата, который пользователь нажимает. Поскольку я не знаю, какой квадрат пользователь щелкнет, я не могу понять, как изменить стиль фона, потому что id/class квадрата неизвестен.Изменение стиля неизвестного элемента в JavaScript

Я не могу сказать:

document.getElementById("randomId").style.backg round

, потому что я не знаю, какой квадрат пользователь щелкнет. Вот код:

<!DOCTYPE html> 
<html> 
<head> 
    <title>Tic-Tac-Toe Game</title> 
    <!-- Latest compiled and minified CSS --> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> 

    <!-- Optional theme --> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"> 
    <style type="text/css"> 
     #buttons{ 
      margin-top: 50px; 
     } 
     #x{ 
      margin-left: 10px; 
     } 
     #table{ 
      margin-top: 15px; 
      background: gray; 
      table-layout: fixed; 
      width: auto; 
      width: 250px; 
      height: 250px; 
     } 
    </style> 
</head> 
<body> 
<div class="container" id="buttons"> 
    <h2 id="h2">Choose your team!</h2> 
    <button onclick="myFunctions()" type="button" class="btn btn-default"><span 
      style="font-weight: bold; font-size: 110%;">O</span></button> 
    <button type="button" id="x" class="btn btn-default"><span class="glyphicon glyphicon-remove"></span> 
    </button> 

    <table id="table" class="table table-bordered"> 
     <tbody> 
     <tr> 
      <td onclick="myFunction()"></td> 
      <td onclick="myFunction()"></td> 
      <td onclick="myFunction()"></td> 
     </tr> 
     <tr> 
      <td onclick="myFunction()"></td> 
      <td onclick="myFunction()"></td> 
      <td onclick="myFunction()"></td> 
     </tr> 
     <tr> 
      <td onclick="myFunction()"></td> 
      <td onclick="myFunction()"></td> 
      <td onclick="myFunction()"></td> 
     </tr> 
     </tbody> 
    </table> 
</div> 

<script type="text/javascript"> 
    var master = false; 
    var servant = false; 

    function myFunctions(){ 
     master = true; 

    } 
    function myFunction() { 
     if (master == true) { 

     } 
    } 
</script> 

<!-- Latest compiled and minified JavaScript --> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
</body> 
</html>

источник

2015-09-28 Aaronpd1

причин, почему вы хотите использовать JavaScript, в отличии от JQuery? я только спрашиваю об этом, потому что jQuery boostrap нуждается в jquery anyways – indubitablee

-> передать элемент DOM для работы, это должно помочь ... – sinisake

Да, я просто хочу попрактиковаться в своем JavaScript. И что я вложу в определение функции? this.style.background? – Aaronpd1

Ну, вы можете либо сделать это так, где вы добавляете аргумент при вызове функции, в данном случае this ключевое слово будет указывать на HTML элемент (тд).

Добавляя класс css, вы можете легко обрабатывать изменения и проверять, не было ли этого раньше.

var master = true; 
 

 
// clickedElement = your dom element you want to update 
 
function myFunction(clickedElement) { 
 
    // if a dom element was given and it doesn't have a className yet 
 
    if (clickedElement && !clickedElement.className) { 
 
    // set a class on the element 
 
    clickedElement.className = master ? 'master' : 'servant'; 
 

 
    // change the player (if it's not a master it's a servant) 
 
    master = !master; 
 
    } 
 
}

#buttons { 
 
    margin-top: 50px; 
 
} 
 
#x { 
 
    margin-left: 10px; 
 
} 
 
#table { 
 
    margin-top: 15px; 
 
    background: gray; 
 
    table-layout: fixed; 
 
    width: auto; 
 
    width: 250px; 
 
    height: 250px; 
 
} 
 
.master { 
 
    background-color: green; 
 
} 
 
.servant { 
 
    background-color: red; 
 
}

<div class="container" id="buttons"> 
 
    <h2 id="h2">Choose your team!</h2> 
 
    <button onclick="myFunctions()" type="button" class="btn btn-default"><span style="font-weight: bold; font-size: 110%;">O</span> 
 
    </button> 
 
    <button type="button" id="x" class="btn btn-default"><span class="glyphicon glyphicon-remove"></span> 
 
    </button> 
 

 
    <table id="table" class="table table-bordered"> 
 
    <tbody> 
 
     <tr> 
 
     <td onclick="myFunction(this)"></td> 
 
     <td onclick="myFunction(this)"></td> 
 
     <td onclick="myFunction(this)"></td> 
 
     </tr> 
 
     <tr> 
 
     <td onclick="myFunction(this)"></td> 
 
     <td onclick="myFunction(this)"></td> 
 
     <td onclick="myFunction(this)"></td> 
 
     </tr> 
 
     <tr> 
 
     <td onclick="myFunction(this)"></td> 
 
     <td onclick="myFunction(this)"></td> 
 
     <td onclick="myFunction(this)"></td> 
 
     </tr> 
 
    </tbody> 
 
    </table> 
 

 

 
</div>

Там нет, конечно, нет оснований только хранить эту информацию на DOM, вы все равно должны оценить, есть ли 3 клетки одного и того же цвета. Вы можете захотеть сохранить структуру данных, которая проверяет, какой блок был нажат, и кто щелкнул по ней, и если есть диагонально, вертикально или горизонтально 3 строки для человека, который просто щелкнул.

и если вы хотите получить больше вдохновения, вы можете проверить это jsfiddle

источник

2015-09-28 21:23:14 Icepickle

Изменение стиля неизвестного элемента в JavaScript

ответ

Смежные вопросы