Реализовывал поле из клеток при нажатии на которые цвет менялся с белого на чёрный и при повторном нажатии обратно, всё бы ничего, но ещё там находится кнопка поменять цвета при нажатии на которую background уже не белый, а чёрный. Но вот незадача выбирая все td из таблицы(моё поле из клеток-это таблица которая создаётся в js) через
document.getElementsByTagName('td') и далее проверяя нажата ли кнопка, и если да, то они меняют цвет с помощью
td.style.background = 'black'; появляется ошибка:
Uncaught TypeError: document.getElementByTagName is not a function at HTMLButtonElement.my
Пробовал очень много других способов, но результат нулевой и да, сама функция на проверку нажата ли кнопка работает, а вот именно окрашивание нет. Может кто знает как решить это проблему, или даст источник? P.S: обращайте внимание только на создание таблицы и функцию my, всё остальное, мой кривой код.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
body {background: silver}
table td{
padding: 20px;
border: 1px solid black;
}
#myTBL td {background: white; color: black}
#myTBL td.act {background: black; color: white}
#myTBL td #bl {background: black;}
</style>
<body>
<table id = "myTBL">
</table>
<button id = 'sub'>поменять цвета</button>
<script type="text/javascript">
var elem = document.querySelector('#myTBL');
createTable(elem, 3, 3);
function createTable(parent, cols, rows){
var table = document.createElement('table');
for(var i = 0; i < rows; i++){
var tr = document.createElement('tr');
for(var j = 0; j < cols; j++){
var td = document.createElement('td');
tr.appendChild(td);
}
table.appendChild(tr);
}
parent.appendChild(table);
}
function myFunc(e){
var evt = window.event || e,
obj = evt.srcElement || evt.target;
if (obj.tagName == 'TABLE') return;
while(obj.tagName != 'TD') obj = obj.parentNode;
obj.className = obj.className ? '' : 'act';
}
function my(){
var sub = document.getElementById('sub');
var td = document.getElementByTagName('td');
if(sub){
td.style.background = 'black';
}
}
onload = function ()
{
var trg = document.getElementById ('myTBL');
var sub = document.getElementById('sub');
if (document.addEventListener) sub.addEventListener ('click', my);
if (document.addEventListener) trg.addEventListener ('click', myFunc); // синтаксис назначения функции для одних браузеров
else if (document.attachEvent) trg.attachEvent ('onclick', myFunc); // для других
else trg.onclick = myFunc; // для третьих
}
</script>
</body>
</html>
