@Kulebiaka

Почему не работает document.getElementsByTagName('td') в связке с td.style.background = 'black';?

Добрый вечер, реализовывал поле из клеток при нажатии на которые цвет менялся с белого на чёрный и при повторном нажатии обратно, всё бы нечего, но ещё там находится кнопка поменять цвета при нажатии на которую 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>
  • Вопрос задан
  • 76 просмотров
Решения вопроса 2
bingo347
@bingo347 Куратор тега JavaScript
Бородатый программер
https://developer.mozilla.org/ru/docs/Web/API/Elem...
Посмотрите как вообще это пишется, и что вообще возвращает.
Ну и вопросов на эту тему за последнюю неделю видел уже штуки 3...
Ответ написан
Bavashi
@Bavashi
function my() {
        var sub = document.getElementById('sub');
        var td = document.getElementsByTagName('td');

        for (var i = 0; i < td.length; i++) {
          td[i].className = td[i].className ? '' : 'act';
        }
      }
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы