Javascript как изменить цвет кнопки при нажатии? - PullRequest
Новая
       0

Javascript как изменить цвет кнопки при нажатии?

0 голосов
/ 27 мая 2020

Я новичок в Javascript. Я хочу создать таблицу 15x15, полную кнопок, и изменить цвет кнопки на красный при нажатии каждой из них. Таблица в порядке, но цвет не работает. 

function createTable(){
    var table = document.createElement('table');
    for(var x = 0; x < 15; x++) {
        var row = table.insertRow();
        for(var y = 0; y < 15; y++) {
            var cell = row.insertCell();
            var button = cell.appendChild(document.createElement('button'));
            var buttID = String('butt' + '_' + x + '_' + y);
            button.setAttribute('id', 'buttID');
            button.setAttribute('onclick', 'mark()');
        }
    }
    document.getElementById('puzzle').appendChild(table);
}

function mark(){
    document.getElementById('buttID').style.color = "red";
}

Я не уверен, что button.setAttribute неверен. Я тоже пробовал следующий способ, но на этот раз вся таблица просто исчезает. Есть идеи по этому поводу? 

button.onclick = mark();

Может быть, я неправильно создаю идентификатор для каждой ячейки? Я не уверен в этом.

Ответы [ 2 ]

1 голос
/ 27 мая 2020

Эта строка неверна и не будет работать: 

document.getElementById('buttID').style.color = "red";

Это пытается получить доступ к кнопке с идентификатором, равным строке «buttID», но такой кнопки нет.

Но вам вообще не нужны идентификаторы на кнопках. Вместо этого вы можете установить функцию onclick для кнопки следующим образом: 

button.onclick = mark;

Затем определите функцию отметки следующим образом: 

function mark() {
  let button = this; // 'this' is the button that was clicked
  button.style.color = 'red';
}


function createTable() {
  var table = document.createElement('table');
  for (var x = 0; x < 15; x++) {
    var row = table.insertRow();
    for (var y = 0; y < 15; y++) {
      var cell = row.insertCell();
      var button = cell.appendChild(document.createElement('button'));
      button.className = 'btn';
      button.onclick = mark;
    }
  }
  puzzle.innerHTML = '';
  puzzle.appendChild(table);
}

function mark() {
  let button = this;
  button.style.backgroundColor = "red";
}

const puzzle = document.getElementById('puzzle');
.btn {
  border: none;
  margin: 0;
  width: 1em;
  height: 1em;
  background-color: white;
}
body {
  background-color: #eee;
}
<button onclick="createTable();">Create Table</button>
<div id="puzzle"></div>
0 голосов
/ 27 мая 2020

Измените это: 

var cell = row.insertCell();
var button = cell.appendChild(document.createElement('button'));
var buttID = String('butt' + '_' + x + '_' + y);
button.setAttribute('id', 'buttID');
button.setAttribute('onclick', 'mark()');

На это: 

var cell = row.insertCell();
// Store the reference to the actual button and not the cell that contains it
var button = document.createElement('button');
// Bind the onclick event of the button to your mark function
// Also remember that you only need the parenthesis if you are calling a function, here we are only passing it
button.onclick = mark;
// Add your button to your table cell
cell.appendChild(button);

Вам также придется отредактировать функцию отметки, чтобы она выглядела так: 

function mark(e){
    e.target.style.background = 'red';
}

Это может показаться запутанным, и вы, вероятно, спросите, откуда взялась эта переменная 'e'. Обычно такие события, как onclick, всегда передают объект события своим функциям обработки. Если поместить переменную в скобки функций обработки, объект события будет автоматически помещен в эту переменную.

Объект события содержит много информации о событии. Вы можете увидеть всю информацию, которую он предоставляет здесь . То, что нам нужно, это «цель» - элемент, вызвавший событие, которым будет любая кнопка, на которую в данном случае была нажата кнопка. Целью является элемент HTML, поэтому мы можем установить для него style.background значение 'red'.

...