Code doesn't work with html5 doctype, but DOES work without it. Any help would be appreciated. Thanks!


#1
<html>

<head>
	<style>
		.containerStyles {
			width: 640px;
			margin: 0 auto;
		}

		.rowStyle {
			display: block;
			float: left;
		}

		.cellStyle {
			display: block;
			background-color: blue;
			width: 100%;
			height: 100%;
		}

		button {
			display: block;
			text-align: center;
			margin: 5% auto;
			padding: 36px;
			border-radius: 4px;
		}
	</style>
</head>

<body>
	<button>Make a painting!</button>
	<div id="container"></div>
	<script>
		var btn = document.querySelector("button");
		btn.addEventListener("click", getUserInput);

		var container = document.getElementById("container");
		container.classList.add("containerStyles");

		var parentEl = document.querySelector("#container");
		parentEl.addEventListener("mouseover", function(e) {
			e.target.style.backgroundColor = colors();
		});
		parentEl.addEventListener("mouseout", function(e) {});

		function getUserInput() {
			var userInput = prompt("Please choose a pixel size to paint with…");

			function genDivs(numCells) {
				for (var i = 0; i < numCells; i++) {
					row = document.createElement("div");
					row.classList.add("rowStyle");
					row.style.width = 640 / numCells;
					row.style.height = 640 / numCells;

					for (var x = 1; x <= numCells; x++) {
						cell = document.createElement("div");
						cell.classList.add("cellStyle");
						row.appendChild(cell);
					}
					parentEl.appendChild(row);
				}
			}
			genDivs(userInput);
		}

		function colors() {
			let colorArray = [];

			for (let i = 0; i < 3; i++) {
				colorArray.push(Math.floor(Math.random() * (255 - 0) + 0));
			}
			// rgb -> hex
			let color = colorArray
				.map(x => x.toString(16))
				.join('');

			return `#${color}`;
		}
	</script>

</body>

</html>

#2

Hi @ppanasis

Are you running the code locally on your computer or on an online repl?


#3

There is not a specific HTML5 doctype, rather just a uniform HTML doctype.

<!DOCTYPE html> 
<html>
</html>

#4

Hi CoT, i’ve tried it both ways…


#5

How strange. I have no idea why that is happening.


#6

Sorry for not getting back sooner, but thanks for your help!