Addition to an HTML assignment (display color, when changing color)

Language Help HTML
1
Color 
  <script>
    function getRandomColor(){
      let letters = '0123456789ABCDEF';
      let color = '#';
      for (let i = 0; i < 6; i++) {
        color += letters[Math.floor(Math.random() * 16)];
      }
      return color;
    }
    function changeColor(){
      let newColor = getRandomColor();
      document.body.style.backgroundColor = newColor;
    }
    
</script>

In this HTML assignment, I’m wondering how can I get to show what color it is on the webpage as well after it generates the color.? what would I add to the code to achieve that?

2

Going off what you have above, one could add this line to the changeColor function:

    document.body.innerHTML = `<p>${newColor}</p>`;
1 Like
3

That did seem to work, but when applied it gets rid of the random color button making you need to restart the program, is there a way to have it display in the middle of the screen but also keep the button to generate the next color

1 Like
4

Yes, I rather suspected you would have a button to change the color, so obviously we wouldn’t want to overwrite the document body.

In the markup for your page, add a <p></p> element, then in the script (outside of any function), cache that node:

const p = document.querySelector('p')

Now change the above line to read,

p.textContent = newColor;

To center the output in the screen is simple enough on the horizontal, but a little trickier on the vertical.

Try this CSS:

p {
    text-align: center;
    margin-top: 45%;
}
1 Like
5

when you say “now change the above line” what do you mean?
because I can add it into the script and paste the text but the text does not turn into the color code :face_with_monocle:

6

Change this line:

document.body.innerHTML = `<p>${newColor}</p>`

to

p.textContent = newColor;

As in,

    function changeColor(){
      const newColor = getRandomColor();
      document.body.style.backgroundColor = newColor;
      p.textContent = newColor;
    }

    const p = document.querySelector('p')

We’re assuming you must have an event listener set up that we just don’t see the code for.

1 Like
7

In the olden days I used to deploy this code to the home page of sites at the opening stage of the domain. It was far more entertaining than an, “Under Construction” page that the search engines so loved (not). For me it was confirmation that the home page was reachable and everything in place to go forward with the site. A day or two later, the site emerged.

http://sregnif.net/

It wasn’t originally in jQuery, but is now. If you can glean anything from it, then we’re in plus territory. It was a fun experiment from ages ago that I’ve just kept around for the sheer novelty of it.

1 Like
8
Color

p.textContent = newColor;

  <script>
    const p = document.querySelector('p.textContent = newColor;')
    
    function getRandomColor(){
      let letters = '0123456789ABCDEF';
      let color = '#';
      for (let i = 0; i < 6; i++) {
        color += letters[Math.floor(Math.random() * 16)];
      }
      return color;
    }
      function changeColor(){
  const newColor = getRandomColor();
  document.body.style.backgroundColor = newColor;
  p.textContent = newColor;
}

const p = document.querySelector('p')
  
      
    }
    </script>
<!-- p.textContent = newColor; -->

now Im just confused where did I go wrong???

9

That line does not look belong there. It should be,

const p = document.querySelector('p')

That line is currently at the bottom of the script but its position doesn’t matter, just so long as it is not inside any function.

There is a stray closing brace at the bottom of your code. It should also be removed.

Can we see all your code, please? HTML and JS.

1 Like
10

and it works!!!
thanks for the chain of help

1 Like