Я видел много вопросов об этой ошибке, но не нашел ответа ни на один из них.
Я создаю интерактивную страницу для создания шаблонов на основе геометрических фигур, и у меня возникают проблемы с добавлением нового элемента с помощью функции, которая создает новый элемент и добавляет элемент в «базовый» div. Затем базовый div клонируется для создания шаблона.
В HTML я создал палитру цветов для предварительного выбора цвета перед созданием элемента и кнопку, содержащую функцию для создания и добавления нового элемента в базовый div.
Также в HTML я создал фигуры SVG со стилем «display:none», и когда я получаю их с помощью JS, я просто меняю его на «display:block».
Я могу дополнить многие элементы инструкциями javascript (в коде есть несколько примеров), но когда я помещаю эти инструкции внутрь функции, код не работает, и я получаю сообщение об ошибке: «Uncaught TypeError: Cannot read property 'style' нуля”
Это мой код, я добавил комментарии для удобства чтения. Надеюсь, вы можете мне помочь.
//Global variables
var picker = document.getElementById('picker');
var color = picker.value;
//Base elements
var myRow = document.getElementById("row");
var myDiv = document.createElement("base");
myDiv.className = 'base';
// Retrieves the 'out_circle' SVG from HTML and defines properties
var innerDiv = document.getElementById("out_circle");
innerDiv.style.display = "block";
innerDiv.style.fill = "#3c00ff";
innerDiv.style.position = "absolute";
// Adds the element to the base div
myDiv.appendChild(innerDiv);
// Retrieves the 'sqr_small' SVG from HTML and defines properties
var innerDiv = document.getElementById("sqr_small");
innerDiv.style.display = "block";
innerDiv.style.fill = "purple";
innerDiv.style.position = "absolute";
innerDiv.style.margin = "5";
// Adds the element to the base div
myDiv.appendChild(innerDiv);
// Retrieves the 'diamond' SVG from HTML and defines properties
var innerDiv = document.getElementById("diamond");
innerDiv.style.display = "block";
innerDiv.style.fill = "green";
innerDiv.style.position = "absolute";
// Adds the element to the base div
myDiv.appendChild(innerDiv);
// Retrieves the 'slash_right' SVG from HTML and defines properties
var innerDiv = document.getElementById("slash_right");
innerDiv.style.display = "block";
innerDiv.style.fill = "orange";
innerDiv.style.position = "absolute";
// Adds the element to the base div
myDiv.appendChild(innerDiv);
//*****NOT WORKING FUNCTION*****
function create_Lslash() {
// Retrieves the 'slash_left' SVG from HTML and defines properties
var innerDiv = document.getElementById("slash_left");
innerDiv.style.display = "block";
innerDiv.style.fill = color;
innerDiv.style.position = "absolute";
// Adds the element to base div
myDiv.appendChild(innerDiv);
}
// Clones the div to create a row
var i = 0;
while (i < 10) {
myRow.appendChild(myDiv.cloneNode(true));
i++;
}
//Clones the row to create a grid
var i = 0;
while (i < 10) {
document.body.appendChild(myRow.cloneNode(true));
i++;
}/* a minimalist set of CSS resets */
/* default to border-box */
html {
box-sizing: border-box;
font-size: 16px;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
/* adjust typography defaults */
body {
margin: 1rem;
font-family: sans-serif;
line-height: 1.5;
}
.base {
display: inline-block;
height: 50px;
width: 50px;
margin: 0px;
padding: 0px;
position: relative;
}
.row {
display: block;
height: 50px;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" href="https://glitch.com/favicon.ico" />
<title>Patterns</title>
<!-- import the webpage's stylesheet -->
<link rel="stylesheet" href="/style.css" />
<!-- import the webpage's javascript file -->
<script src="/script.js" defer></script>
</head>
<body>
<!-- Color picker -->
<div style="padding:40px 0 0 0;">
<input type="color" id="picker" value="#0000ff">
</div>
<!-- "Create" button -->
<div style="padding:40px 0 40px 0;">
<button id="creator" onclick="create_Lslash()">Create</button>
</div>
<div id="row" class="row"></div>
<!-- Elements to append -->
<div>
<!-- Diamond -->
<svg id="diamond" x="0px" y="0px" width="50px" height="50px" viewbox="0 0 50 50" style="enable-background:new 0 0 50 50; display:none;" xml:space="preserve">
<style type="text/css">
</style>
<rect x="7.32" y="7.32" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -10.3553 25)" class="st0" width="35.36" height="35.36"/>
</svg>
<!-- Out_circle -->
<svg id="out_circle" x="0px" y="0px" width="50px" height="50px" viewbox="0 0 50 50" style="enable-background:new 0 0 50 50; display:none;" xml:space="preserve">
<style type="text/css">
</style>
<defs>
</defs>
<g>
<path class="st0" d="M25,50h25V25C50,38.81,38.81,50,25,50z"/>
<path class="st0" d="M25,0c13.81,0,25,11.19,25,25V0H25z"/>
<path class="st0" d="M0,25v25h25C11.19,50,0,38.81,0,25z"/>
<path class="st0" d="M25,0H0v25C0,11.19,11.19,0,25,0z"/>
</g>
</svg>
<!-- Small square -->
<svg id="sqr_small" x="0px" y="0px" width="40px" height="40px" viewbox="0 0 40 40" style="enable-background:new 0 0 40 40; display:none;" xml:space="preserve">
<defs>
</defs>
<rect width="40" height="40"/>
</svg>
<!-- Right slash -->
<svg id="slash_right" x="0px" y="0px" width="50px" height="50px" viewbox="0 0 50 50" style="enable-background:new 0 0 50 50; display:none;" xml:space="preserve">
<defs>
</defs>
<g>
<polygon class="st0" points="6.36,0 0,0 0,6.36 43.64,50 50,50 50,43.64 " />
</g>
</svg>
<!-- Left slash -->
<svg id="slash_left" x="0px" y="0px" width="50px" height="50px" viewbox="0 0 50 50" style="enable-background:new 0 0 50 50; display:none;" xml:space="preserve">
<defs>
</defs>
<g>
<polygon class="st0" points="0,43.64 0,50 6.36,50 50,6.36 50,0 43.64,0 "/>
</g>
</svg>
</div>
</body>
</html>