GetElementById возвращает значение null при попытке доступа к элементу SVG
Я пытаюсь написать скрипт, который будет динамически создавать элемент SVG и отображать его. Однако, когда я устанавливаю идентификатор элемента SVG, а затем пытаюсь получить к нему доступ с помощью Document.getElementById(), он возвращает значение null. Я использую window.onload, чтобы убедиться, что документ будет загружен до вызова скрипта.
<body>
<script>
function buildSVG(color) {
const shape = `<rect x = "0" y = "0" width = "90" height = "90" stroke = "black" fill = "${color}"/>`;
return shape;
}
function addSVG(color) {
let svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
svg.id = "svgID";
let elem = document.getElementById("svgID");
elem.setAttribute('width', '600');
svg.setAttribute('height', '250');
svg.innerHTML = buildSVG(color);
svg.setAttribute('style', 'border: 1px solid black');
document.body.appendChild(svg);
}
window.onload = addSVG("cyan");
</script>
</body>
Я ожидаю, что будет отображаться голубой квадрат. Однако я получаю сообщение об ошибке «невозможно прочитать свойство setAttribute of null».
Что я могу сделать, чтобы исправить это?
Его нужно добавить в DOM, прежде чем вы сможете запросить его.
Я просто хотел проверить, будет ли работать установка какого-либо атрибута с помощью elem. Мне не разрешен доступ к элементу через 2 разные переменные?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Когда вы создаете свой svg-элемент, у вас уже есть ссылка на него в назначенной вами переменной. Не нужно снова получать его из документа. Это было бы даже невозможно, так как он еще не добавлен в документ. Вот исправленный код:
function buildSVG(color) {
const shape = `<rect x = "0" y = "0" width = "90" height = "90" stroke = "black" fill = "${color}"/>`;
return shape;
}
function addSVG(color) {
let svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
svg.id = "svgID";
svg.setAttribute('width', '600');
svg.setAttribute('height', '250');
svg.innerHTML = buildSVG(color);
svg.setAttribute('style', 'border: 1px solid black');
document.body.appendChild(svg);
}
window.onload = addSVG("cyan");
// after 1 second: get the svgID-element and change the border.
setTimeout(function(){
document.getElementById('svgID').setAttribute('style', 'border: 1px dashed red');
}, 1000);Он добавляется в документ только после завершения скрипта? Если я добавлю еще один элемент скрипта и запрошу с использованием идентификатора, будет ли это работать?
Конечно, тогда вы используете document.getElementById('svgID'). Я добавил в код пример, который меняет границу svg-элемента через 1 секунду.
let elem = document.getElementById("svgID"); elem.setAttribute('width', '600'); svg.setAttribute('height', '250');Вы хотите установить ширину и высоту для двух отдельных переменных? Я не думаю, что вам нужно создавать svg, а затем получать элемент по идентификатору. Я думаю, вы можете просто работать непосредственно с переменной svg.