Случайные цветовые коды меняются на # 000000 со второй попытки - PullRequest
Новая
       0

Случайные цветовые коды меняются на # 000000 со второй попытки

0 голосов
/ 27 мая 2020

Я пытаюсь сделать кнопку, которая генерирует два случайных кода для двух цветов. Кажется, что при первом щелчке он работает, но при втором оба кода становятся такими # 000000 .

Я пытался решить проблему самостоятельно, но не смог найти решения . Как я мог решить проблему? Приветствуются любые советы. 

var css = document.querySelector("h3");
var color1 = document.querySelector(".color1");
var color2 = document.querySelector(".color2");
var body = document.getElementById('gradient')
var random1 = document.getElementById("random1");
var random2 = document.getElementById("random2");
var colorGenerator = "1234567890ABCDEF";
var colortag1 = "#";
var colortag2 = "#";


	
function backgroundcolor(){
	 body.style.background = "linear-gradient(to right,"
	+ color1.value + ","+ color2.value +")";

css.textContent = body.style.background;
}

css.textContent = "linear-gradient (to right, "
	+ color1.value + ", "+ color2.value +")";

function randomColor (){
	for (i = 0; i < 6; i++){
		colortag1 += colorGenerator[Math.floor(Math.random() * 16)];
		colortag2 += colorGenerator[Math.floor(Math.random() * 16)];
		color1.value = colortag1;
		color2.value = colortag2;
	}

		body.style.background = "linear-gradient(to right,"
	+ color1.value + ","+ color2.value +")";
			console.log(color1);
			console.log(color2);

		css.textContent = "linear-gradient (to right, "
	+ color1.value + ", "+ color2.value +")";
		
	
}	



color1.addEventListener("input", backgroundcolor);
color2.addEventListener("input",backgroundcolor);
random1.addEventListener("click", randomColor);	
body {
	font: 'Raleway', sans-serif;
    color: rgba(0,0,0,.5);
    text-align: center;
    text-transform: uppercase;
    letter-spacing: .5em;
    top: 15%;
	background: linear-gradient(to right, red , yellow); /* Standard syntax */
}

h1 {
    font: 600 3.5em 'Raleway', sans-serif;
    color: rgba(0,0,0,.5);
    text-align: center;
    text-transform: uppercase;
    letter-spacing: .5em;
    width: 100%;
}

h3 {
	font: 900 1em 'Raleway', sans-serif;
    color: rgba(0,0,0,.5);
    text-align: center;
    text-transform: none;
    letter-spacing: 0.01em;

}

button {
    color: rgba(0,0,0,.5) ;
    font: 800 1em 'Raleway', sans-serif;
    background-color: transparent;
    border: none;
    overflow: hidden;
    outline: none;
}
<!DOCTYPE html>
<html>
<head>
	<title>Gradient background</title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body id="gradient">
	<h1>Backround Generator</h1>
	<input class="color1" type="color" name="color1" value="#FF0000">
	<input class="color2" type="color" name="color2" value="#FFFF00">
	<h2>Current CSS Background</h2>
	<button id="random1">Random Colors</button>
	
	<h3></h3>
	<script type="text/javascript" src="script.js"></script>
</body>
</html>

Ответы [ 2 ]

0 голосов
/ 27 мая 2020

Вы никогда не сбрасываете colortag1 или colortag2, как заметил Сантия go Касас Рей. Это будет легче заметить с более организованным кодом. Особенно беспорядок может возникнуть, если возиться с Math.random (). Я использую rando. js, чтобы сделать мою случайность более простой и читаемой. Вы можете получить случайную шестнадцатеричную строку с помощью rando. js вот так: 

function randomHex(){
  var hex = "#";
  for(var i = 0; i < 3; i++) hex += ("0" + rando(255).toString(16)).slice(-2);
  return hex;
}

console.log(randomHex());
<script src="https://randojs.com/1.0.0.js"></script>

Это может быть даже однострочный, если вы хотите: 

console.log( "#" + ("0" + rando(255).toString(16)).slice(-2) + ("0" + rando(255).toString(16)).slice(-2) + ("0" + rando(255).toString(16)).slice(-2) );
<script src="https://randojs.com/1.0.0.js"></script>

Если мы применим это к вашему js, получится: 

var css = document.querySelector("h3");
var color1 = document.querySelector(".color1");
var color2 = document.querySelector(".color2");
var body = document.getElementById('gradient')
var random1 = document.getElementById("random1");

function randomHex() {
  var hex = "#";
  for (var i = 0; i < 3; i++) hex += ("0" + rando(255).toString(16)).slice(-2);
  return hex;
}

function changeToColors(hex1, hex2){
  body.style.background = "linear-gradient(to right," + hex1 + "," + hex2 + ")";
  css.textContent = body.style.background;
}

function changeToInputColors() {
  changeToColors(color1.value, color2.value);
}

function changeToRandomColors() {
  changeToColors(randomHex(), randomHex());
}

changeToInputColors();

color1.addEventListener("input", changeToInputColors);
color2.addEventListener("input", changeToInputColors);
random1.addEventListener("click", changeToRandomColors);
body {
  font: 'Raleway', sans-serif;
  color: rgba(0, 0, 0, .5);
  text-align: center;
  text-transform: uppercase;
  letter-spacing: .5em;
  top: 15%;
  background: linear-gradient(to right, red, yellow);
  /* Standard syntax */
}

h1 {
  font: 600 3.5em 'Raleway', sans-serif;
  color: rgba(0, 0, 0, .5);
  text-align: center;
  text-transform: uppercase;
  letter-spacing: .5em;
  width: 100%;
}

h3 {
  font: 900 1em 'Raleway', sans-serif;
  color: rgba(0, 0, 0, .5);
  text-align: center;
  text-transform: none;
  letter-spacing: 0.01em;
}

button {
  color: rgba(0, 0, 0, .5);
  font: 800 1em 'Raleway', sans-serif;
  background-color: transparent;
  border: none;
  overflow: hidden;
  outline: none;
  cursor:pointer;
  text-decoration:underline;
}
<!DOCTYPE html>
<html>
  <head>
    <title>Gradient background</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <script src="https://randojs.com/1.0.0.js"></script>
  </head>
  <body id="gradient">
    <h1>Backround Generator</h1>
    <input class="color1" type="color" name="color1" value="#FF0000">
    <input class="color2" type="color" name="color2" value="#FFFF00">
    <h2>Current CSS Background</h2>
    <button id="random1">Random Colors</button>
    <h3></h3>
  </body>
</html>

Если вы хотите использовать этот код, просто не забудьте включить эту строку в тег заголовка вашего html документа: 

<script src="https://randojs.com/1.0.0.js"></script>
0 голосов
/ 27 мая 2020

В фрагменте кода: 

for (i = 0; i < 6; i++){
        colortag1 += colorGenerator[Math.floor(Math.random() * 16)];
        colortag2 += colorGenerator[Math.floor(Math.random() * 16)];
        color1.value = colortag1;
        color2.value = colortag2;
    }

Вы добавляете тег цвета (colortag1 + =), поэтому во второй раз значение будет похоже на «# 7C247EEC3C75». Вы должны присвоить переменной пустую строку. 

colortag1 = "#";
colortag2 = "#";
for (i = 0; i < 6; i++){
        colortag1 += colorGenerator[Math.floor(Math.random() * 16)];
        colortag2 += colorGenerator[Math.floor(Math.random() * 16)];
        color1.value = colortag1;
        color2.value = colortag2;
    }

Надеюсь, это поможет.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...