Uncaught TypeError: Невозможно прочитать свойство 'classList' с нулевым значением - SVG

Question

У меня есть интерактивная карта SVG, которая содержит много областей, я использую веб-сокеты для отправки данных областей с сервера Node.js в клинику. Но когда я добираюсь до части кода, консоль показывает сообщение об ошибке Uncaught TypeError: Cannot read property 'classList' of null.

Javascript:

socket.on('mapData', function(data) {
    for (let i = 0; i < data.length; i++) {   // data is an array of objects, its length is 41, while all areas i have on the svg are 49
        let area = document.getElementById("map").getSVGDocument().getElementById('area_'+i);
        if (data[i].owner == "client") {
            area.classList.add('y');
            area.classList.remove('st0');
            area.id = "home";
        } else {
            if (data[i].owner == null) {
                area.setAttribute("fill", "#ffffff");
                area.id = "unallocated_"+i;
            } else {
                // everything above works great, the error starts from here
                area.classList.add('t');
                area.id = data[i].owner;
            }
        }
    }
});

Часть карты SVG:

<g id="ThirdProvince">
<path id="area_3" class="st0" d="M147.4,68l-2.1,2.3l0.3,1l0.1,0l0.2,0.1l0.1,0l0.6,0.1l0.2,0l0.2,0.1l0.1,0.1l0.1,0.1l0.1,0.2
    l0.1,0.2l0,0.3l0,0.3l0,0.2l-0.1,0l-1,0.2l-1,0l-0.8-0.1l-0.2,0l-0.4-0.1l-0.8-0.2l-0.1,0l-0.3,0l-0.2,0l-0.3,0.1l-0.7,0.4l-0.1,0
    l0,0.1l0.1,0.4l-0.3,0l-1.1-0.1l-1.2-0.3l-0.1-0.1l-0.1-0.1l0-0.4l0-0.1l-0.1-0.3l-0.1-0.1l-0.1,0l-0.3-0.1l-3.9-1l-0.2,0l-1.6-0.2
    l-1.3-0.2l-2.5-0.3l-0.8,0.4l-0.4,0.2l-0.4,0.2l-0.1,0l-0.3,0l-1.1,0l-0.5,0.2l-0.1,0l-0.2-0.1l-0.1,0l0-0.1l0.1-2l0-0.3l0.5-1.1
    l0.6-1l0.1,0l0.5-0.1l0.2,0l0.2,0.1l0.2,0l1.1-0.3l0.1-0.1l0-0.1l0-0.1l-2.1-1.3l-0.4,0.1l-1.3,0.1l-0.2,0l-0.5-0.1l-0.8-0.2
    l-0.4-0.1l-0.3,0l-0.1,0l0,0l-0.4-1.4l0,0l0.1-0.2l0.4-0.2L126,62l0.4-0.5l0.1-0.2l0.3-0.2l0.8-0.4l0.8-0.1l0.4,0l0.2,0.1l0.1,0.1
    l0,0l0.1,0.1l0.1,0l1.8-0.1L134,60l0.9-0.3l0.1,0l1-1.3l0.9-0.7l0.4,0.3l1.1,1.1l0.4,0.5l1.1,1l0.1,0.1l0.3,0.1l1.5,0l1.2,0
    l0.4,0.2l0.7,0.4l0.1,0.1l0.1,0.1l0.4,0.6l-0.1,0.4l-0.1,0.8l1.5,1.2l0.8,0.2l0.6,0.1l0.2,0l1-0.2l0.5,0.1l0.8,1.1l0.1,0.1l0,0.1
    l-0.1,0l-0.5,0.2l-0.6,0.1l-0.2,0l-0.1,0.1l-0.1,0.1l-0.3,0.7L147.4,68z"/>
</g>

CSS классы:

.st0{stroke:#000000;cursor:pointer;}
.st0:hover {fill: #fce57e;}
.t {fill:#47a3e5;stroke:#000000;cursor:pointer;}
.t:hover {fill: #fce57e;}
.y {fill:#2bd88d;stroke:#000000;}

Часть данных, отправляемых сервером:

data = [{id:0,owner=null},{id:1,owner="other"},{id:2,owner="other"},{id:3,owner=null},{id:4,owner="client"},{id:5,owner=null}, ... ,{id:40,owner=null}];

Я не очень понимаю, почему отображается ошибка.

Answer 1

Насколько я понимаю, ваша проблема в том, что ваша программа не может найти элемент с идентификатором area_1, так как вы сказали, что console.log(i) выводит только 1. Это потому, что вы не можете найти это элемент. Кроме того, в упомянутой вами ошибке консоли в какой строке говорилось об ошибке?