Почему не работает функция genNewColor? - PullRequest
Новая
       0

Почему не работает функция genNewColor?

0 голосов
/ 20 июня 2020

Этот код должен генерировать случайный цвет. Я не уверен, почему это не работает, я считаю, что это как-то связано с функцией, поскольку форматирование css отлично работает. Когда я запускаю код, я не получаю сообщений об ошибках, код просто не работает. 

<!DOCTYPE html>
<html>
<head>
<title>
	Color Generator 
</title>
<style>
body{
	margin: 0;
	padding: 0;
	background: #161818;
	font-family: "Consolas";
}
.color{
	margin-top: 300px;
	text-align: center;
}
#hex{
	display: block;
	color: white;
	font-size: 100px;
	text-transform: uppercase;
	margin: 0px;
}
.color button{
	background: none;
	outline: 10px;
	color: white;
	cursor: pointer;
	font-size: 40px;
	border: 3px solid white;
}
</style>
</head>
<body>

<div class="color">
		<span id="hex">#??????</span>
		<button onclick="genNewColor()">Generate New Color</button>
		</button>
</div>

<script type="text/javascript">
	function genNewColor() {
		var symbols,color;
		symbols = "0123456789ABCDEF";
		
		color = "#";
		for(var i =0;i<6;i++){
			color = color + symbols[Math.floor(Math.random() * 16)]
		}
		document.body.style.background = color;
		document.getElementById("hex").innerHTML = color
	}
</body>
</html>

Ответы [ 2 ]

0 голосов
/ 20 июня 2020

Ваш элемент <button> имеет дополнительный закрывающий тег </button>, а в вашем теге <script> отсутствует закрывающий тег </script>.

Проверьте и запустите следующий фрагмент кода для практического примера вашего кода с вышеуказанными исправлениями: 

function genNewColor() {
  var symbols,color;
  symbols = "0123456789ABCDEF";

  color = "#";
  for(var i =0;i<6;i++){
    color = color + symbols[Math.floor(Math.random() * 16)]
  }
  document.body.style.background = color;
  document.getElementById("hex").innerHTML = color
}
body{
	margin: 0;
	padding: 0;
	background: #161818;
	font-family: "Consolas";
}
.color{
	margin-top: 100px;
	text-align: center;
}
#hex{
	display: block;
	color: white;
	font-size: 100px;
	text-transform: uppercase;
	margin: 0px;
}
.color button{
	background: none;
	outline: 10px;
	color: white;
	cursor: pointer;
	font-size: 40px;
	border: 3px solid white;
}
<div class="color">
  <span id="hex">#??????</span>
  <button onclick="genNewColor()">Generate New Color</button>
</div>
0 голосов
/ 20 июня 2020

Отсутствует конец </script> тег: (прокрутите окно предварительного просмотра) 

<!DOCTYPE html>
<html>
<head>
<title>
	Color Generator 
</title>
<style>
body{
	margin: 0;
	padding: 0;
	background: #161818;
	font-family: "Consolas";
}
.color{
	margin-top: 300px;
	text-align: center;
}
#hex{
	display: block;
	color: white;
	font-size: 100px;
	text-transform: uppercase;
	margin: 0px;
}
.color button{
	background: none;
	outline: 10px;
	color: white;
	cursor: pointer;
	font-size: 40px;
	border: 3px solid white;
}
</style>
</head>
<body>

<div class="color">
		<span id="hex">#??????</span>
		<button onclick="genNewColor()">Generate New Color</button>
		</button>
</div>

<script type="text/javascript">
	function genNewColor() {
		var symbols,color;
		symbols = "0123456789ABCDEF";
		
		color = "#";
		for(var i =0;i<6;i++){
			color = color + symbols[Math.floor(Math.random() * 16)]
		}
		document.body.style.background = color;
		document.getElementById("hex").innerHTML = color
	}
  </script>
</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...