When a click event occurs I am getting the content displays but it stacks on top of each other. How do I get the HTML content to display on one line and not stack? Meaning how do I get it to only only once after a new click event occurs?
function colorGenerator(e) {
const r = Math.floor(Math.random() * 255) + 1;
const g = Math.floor(Math.random() * 255) + 1;
const b = Math.floor(Math.random() * 255) + 1;
document.body.style.backgroundColor = `rgb(${r}, ${g}, ${b})`;
const p = document.createElement('p');
const content = p.innerHTML = `rgb(${r}, ${g}, ${b})`;
document.body.appendChild(p);
//e.preventDefault()
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Background Color Generator</title>
</head>
<body>
<button type="submit" onclick="colorGenerator()">Click Me to Change Color</button>
</body>
</html>Don't append a new element, assign to the innerHTML of an existing element to replace it.
function colorGenerator(e) {
const r = Math.floor(Math.random() * 255) + 1;
const g = Math.floor(Math.random() * 255) + 1;
const b = Math.floor(Math.random() * 255) + 1;
document.body.style.backgroundColor = `rgb(${r}, ${g}, ${b})`;
const p = document.getElementById('output');
p.innerHTML = `rgb(${r}, ${g}, ${b})`;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Background Color Generator</title>
</head>
<body>
<button type="submit" onclick="colorGenerator()">Click Me to Change Color</button>
<p id="output"></p>
</body>
</html>you need to do one thing in each function
1- you generating color 2- add node to DOM
every time you click on the button you executing colorGenerator and add new element to the dom.
here some example:
const p = document.createElement('p');
p.setAttribute("id", "theP");
document.body.appendChild(p);
function colorGenerator(e) {
const r = Math.floor(Math.random() * 255) + 1;
const g = Math.floor(Math.random() * 255) + 1;
const b = Math.floor(Math.random() * 255) + 1;
return `rgb(${r}, ${g}, ${b})`;
}
function changeColor (e) {
var color = colorGenerator(e)
document.body.style.backgroundColor = color;
p.innerHTML = color;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Background Color Generator</title>
</head>
<body>
<button type="submit" onclick="changeColor()">Click Me to Change Color</button>
</body>
</html>replaceWith() to replace a previous element with a newly created oneonclick attribute (read here why)const button = document.querySelector('button[type="submit"]');
generateColor = (e) => {
e.preventDefault();
// Check for the existing element
const existing = document.querySelector('p');
// Map over a range to avoid repeating yourself
const [r, g, b] = [...Array(3).keys()].map(() => Math.floor(Math.random() * 255) + 1);
const color = `rgb(${r}, ${g}, ${b})`;
document.body.style.backgroundColor = color;
const p = document.createElement('p');
p.textContent = color;
// If a p tag already exists, replace it with new one
if (existing) return existing.replaceWith(p);
// Otherwise, append new one to the body (only happens on)
// first click
document.body.appendChild(p);
};
// Use eventlistener instead of "onclick" attribute
button.addEventListener('click', generateColor);<body>
<button type="submit">Click Me to Change Color</button>
</body>