Uncaught TypeError: Cannot read property 'style' of null at HTMLInputElement.func1

Question

Где ошибка в коде? В консоле пишет: Uncaught TypeError: Cannot read property 'style' of null at HTMLInputElement.func1

// получаем все значения ползунков и присваиваем обработчик
document.getElementById("rtl").addEventListener("input", func1);
document.getElementById("rtr").addEventListener("input", func1);
document.getElementById("rbr").addEventListener("input", func1);
document.getElementById("rbl").addEventListener("input", func1);

function func1() {
	// ползунки
	var rtl = document.getElementById("rtl").value;
	var rtr = document.getElementById("rtr").value;
	var rbr = document.getElementById("rbr").value;
	var rbl = document.getElementById("rbl").value;

	// окно с текстом
	var ttl = document.getElementById("ttl");
	var ttr = document.getElementById("ttr");
	var tbr = document.getElementById("tbr");
	var tbl = document.getElementById("tbl");

	// наша фигура
	var block = document.getElementById("block");

	// окно принимает значение ползунка
	ttl.value = rtl;
	ttr.value = rtr;
	tbr.value = rbr;
	tbl.value = rbl;

	// задаем стиль блока
	block.style.borderRadius = rtl + "px " + rtr + "px " + rbr + "px " + rbl + "px";
	console.log(block.style.borderRadius);
}

body {
	margin: 0;
	padding: 0;
}

*,
*:before,
*:after {
	box-sizing: border-box;
}

.block {
	width: 200px;
	height: 100px;
	background-color: #1eb377;
}

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="main.css">
</head>
<body>
	<div class="block1">
		<p>Верхний левый угол
			<!-- rtl - range top left -->
			<input type="range" id="rtl" min="0" max="100" value="0">
			<!-- ttl - text top left -->
			<input type="text" id="ttl" value="0">
		</p>
		<p>Верхний правый угол
			<!-- rtr - range top right -->
			<input type="range" id="rtr" min="0" max="100" value="0">
			<!-- ttr - text top right -->
			<input type="text" id="ttr" value="0">
		</p>
		<p>Нижний правый угол
			<!-- rbr - range bottom right -->
			<input type="range" id="rbr" min="0" max="100" value="0">
			<!-- tbr - text bottom right -->
			<input type="text" id="tbr" value="0">
		</p>
		<p>Нижний левый угол
			<!-- rbl - range bottom left -->
			<input type="range" id="rbl" min="0" max="100" value="0">
			<!-- tbl - text bottom left -->
			<input type="text" id="tbl" value="0">
		</p>
	</div>
	<div class="block">
		
	</div>
	<script src="script.js"></script>
</body>
</html>

Answer 1

Нет элемента с id="block".

var block = document.querySelector(".block");

// получаем все значения ползунков и присваиваем обработчик
document.getElementById("rtl").addEventListener("input", func1);
document.getElementById("rtr").addEventListener("input", func1);
document.getElementById("rbr").addEventListener("input", func1);
document.getElementById("rbl").addEventListener("input", func1);

function func1() {
	// ползунки
	var rtl = document.getElementById("rtl").value;
	var rtr = document.getElementById("rtr").value;
	var rbr = document.getElementById("rbr").value;
	var rbl = document.getElementById("rbl").value;

	// окно с текстом
	var ttl = document.getElementById("ttl");
	var ttr = document.getElementById("ttr");
	var tbr = document.getElementById("tbr");
	var tbl = document.getElementById("tbl");

	// наша фигура
	var block = document.querySelector(".block");

	// окно принимает значение ползунка
	ttl.value = rtl;
	ttr.value = rtr;
	tbr.value = rbr;
	tbl.value = rbl;

	// задаем стиль блока
	block.style.borderRadius = rtl + "px " + rtr + "px " + rbr + "px " + rbl + "px";
	console.log(block.style.borderRadius);
}

body {
	margin: 0;
	padding: 0;
}

*,
*:before,
*:after {
	box-sizing: border-box;
}

.block {
	width: 200px;
	height: 100px;
	background-color: #1eb377;
}

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="main.css">
</head>
<body>
	<div class="block1">
		<p>Верхний левый угол
			<!-- rtl - range top left -->
			<input type="range" id="rtl" min="0" max="100" value="0">
			<!-- ttl - text top left -->
			<input type="text" id="ttl" value="0">
		</p>
		<p>Верхний правый угол
			<!-- rtr - range top right -->
			<input type="range" id="rtr" min="0" max="100" value="0">
			<!-- ttr - text top right -->
			<input type="text" id="ttr" value="0">
		</p>
		<p>Нижний правый угол
			<!-- rbr - range bottom right -->
			<input type="range" id="rbr" min="0" max="100" value="0">
			<!-- tbr - text bottom right -->
			<input type="text" id="tbr" value="0">
		</p>
		<p>Нижний левый угол
			<!-- rbl - range bottom left -->
			<input type="range" id="rbl" min="0" max="100" value="0">
			<!-- tbl - text bottom left -->
			<input type="text" id="tbl" value="0">
		</p>
	</div>
	<div class="block">
		
	</div>
	<script src="script.js"></script>
</body>
</html>

БЛОГ НА HUSL

Uncaught TypeError: Cannot read property 'style' of null at HTMLInputElement.func1

Ответы (1 шт):