如何使HTML节点不堆叠?

当一个点击事件发生时，我得到的内容显示，但它堆叠在彼此的顶部。如何使HTML内容显示在一行上而不是堆叠?意思是我如何让它只有只有一次后，一个新的点击事件发生?

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>

不要添加新元素，将现有元素的innerHTML赋值代替。

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>

你需要在每个函数中做一件事

1-你生成颜色2-添加节点到DOM

每次你点击按钮，你执行colorGenerator和添加新的元素到dom。

这里有一些例子:

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()将先前的元素替换为新创建的元素
不要使用onclick属性(在这里阅读为什么)

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>

您应该创建set<p>元素，并将rgb文本添加到：

let p = document.querySelector("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;
document.body.style.backgroundColor = `rgb(${r}, ${g}, ${b})`;
const content = p.innerHTML += ` rgb(${r}, ${g}, ${b})`;
document.body.appendChild(p);
}

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Background Color Generator</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<button type="submit" onclick="colorGenerator()">Click Me to Change Color</button>
<p></p> <!-- new element -->
<script src="script.js"></script>
</body>
</html>

相关内容

最新更新

热门标签：