Swirling hues transforming into #000000 upon second attempt

Question

Swirling hues transforming into #000000 upon second attempt

My goal is to create a button that generates two random color codes. Initially, this button seems to work fine on the first click, but on the second click, both codes turn into #000000.

Despite my attempts to troubleshoot the issue, I haven't been able to find a solution. I would greatly appreciate any advice on how to fix this problem.

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 = "#";
...


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>

javascript html css

Answer 1

Answer №1

When working with the snippet code:

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;
    }

It is important to note that by appending to the color tag (colortag1 +=), the resulting value will be something like '#7C247EEC3C75' on the second iteration. To avoid this, make sure to assign the variable to an empty string before the loop.

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;
    }

I trust this solution will be beneficial for your project.

Answer 2

When working with the snippet code:

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;
    }

It is important to note that by appending to the color tag (colortag1 +=), the resulting value will be something like '#7C247EEC3C75' on the second iteration. To avoid this, make sure to assign the variable to an empty string before the loop.

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;
    }

I trust this solution will be beneficial for your project.

Answer 3

Answer №2

According to Santiago Casas Rey, you should remember to reset colortag1 and colortag2. It's important to maintain organized code to avoid unnecessary confusion, especially when using Math.random(). Personally, I find rando.js helpful for simplifying and improving the readability of randomness. To generate a random hex string with rando.js, you can use the following code snippet:

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>

If you prefer a one-liner, you can use the following code:

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>

Applying this concept to your JavaScript code:

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 */
}

(remaining CSS code omitted for brevity)

<!DOCTYPE html>
(remaining HTML code omitted for brevity)
</html>

Don't forget to include the following line in the head tag of your HTML document to use this code:

<script src="https://randojs.com/1.0.0.js"></script>

Answer 4

According to Santiago Casas Rey, you should remember to reset colortag1 and colortag2. It's important to maintain organized code to avoid unnecessary confusion, especially when using Math.random(). Personally, I find rando.js helpful for simplifying and improving the readability of randomness. To generate a random hex string with rando.js, you can use the following code snippet:

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>

If you prefer a one-liner, you can use the following code:

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>

Applying this concept to your JavaScript code:

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 */
}

(remaining CSS code omitted for brevity)

<!DOCTYPE html>
(remaining HTML code omitted for brevity)
</html>

Don't forget to include the following line in the head tag of your HTML document to use this code:

<script src="https://randojs.com/1.0.0.js"></script>

Swirling hues transforming into #000000 upon second attempt

Answer №1

Answer №2

Similar questions

Switching from HTML to PHP programming

How can I indicate to the browser that the HTML page should be accessed through SSL?

Utilizing External Libraries in SAPUI5 Extension Development

What is the best way to update or include a new class in the jQuery mobile loader widget?

Ways to identify the moment jQuery datatable is initialized and populated with information

Combining array elements into sets of n

What is the best way to display or hide specific tables depending on the button chosen?

Replace the plus signs in a string with spaces using the JSON.stringify method

What is the best way to begin an ordered list from the number 2 instead of 1, while ensuring W3C validity and compatibility with

What steps can be taken to halt an ongoing AJAX call and initiate a new one with different parameters?

Analyzing and tallying JSON attributes using JavaScript

Adjusting the URL variable based on the selected checkbox option

Managing user input in Node.js

Analyzing and swapping objects within two arrays

What is the best way to incorporate the PUT method...?

Disable touch interactions on the body, only allow pinch-zoom on specific elements

What drawbacks come with developing an Express.js application using TypeScript?

The cursor in a contenteditable element fails to return to its original position after adding a new line and then deleting it

Conceal the ::before pseudo-element when the active item is hovered over

What is the best way to update the style following the mapping of an array with JavaScript?