How do I get the HTML nodes to not stack?-CodePudding

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>

CodePudding user response：

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>

CodePudding user response：

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>

CodePudding user response：

Use replaceWith() to replace a previous element with a newly created one
Don't use the onclick attribute (read here why)
You can use a loop instead of repeating your random number generation stuff three times.

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>

CodePudding user response：

You should make a set <p> element, and add your rgb text to that:

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>