Change background color by DOM manipulation

JavaScript
1

Trying to change the background color of the paragraph element when someone enters a color into the textbox and hits “change color” button.
.On page load, a random number of elements will be generated. Random numbers are 1-5 elements.

Any advice on how to get this going?

If anyone would like to jump on a Google meet call that would be great.

2

Do you have some code you can show us? Create an example of what you have tried so we can help you as needed, you can use something like Codepen or whatnot.

Are you supposed to use the color that was typed in? If so it can get more complicated than it needs to be. It would be easier to just supply a list of valid colors to choose from (like a select menu).

1 Like
3

I added the .js file that was given. I have to create another .js file to work off of.

Yes, it does have to be a color that was type in. Unfortunately.

4

So it’s an assignment of some sort?

There isn’t any code other than the code that generates the DOM elements. What have you tried so far?

Without knowing your current level of knowledge it is much harder to help you.

  • Do you know how to attach an event listener to the buttons?

  • Do you know how to get the value from the input element?

  • Do you know how to change the style of elements?

  • What is the limit of valid colors and what should happen if an invalid color is typed in?

Edit: some links to help you get started

1 Like
5

Yes, its an assignment.

Ive only started coding for the past 3 weeks, so I dont know much. Here is what I have so far.

const colors = ['green', 'pink', 'gray', 'black', 'red', 'blue', 'indigo', 'violet', 'white', 'yellow'];
const btnColor = document.querySelectorAll('.background-color');
for (let btnColors of colors) {
    if (btnColors == colors); {
};



let changeBackground = () => {
    console.log('clicked');
}


btnColor.addEventListener('click', changeBackground)

As you can see I am going in every which direction. Ive done hours of searching but either im not understanding (obviously) or nothing is popping out that would be useful.

1 Like
6
2 Likes
7

  1. Get all the buttons using document.querySelectorAll.

  2. Add an event listener to all the buttons.

  3. Inside the button click handler function get the event.target. Using the target you can get to the previousElementSibling and nextElementSibling that is the input element and the paragraph element surrounding the button. Pass the element and color value to a function.

// destructor target off the event object just for ease
const handleColorSubmit = ({ target }) => {
  // input element before the button
  console.log(target.previousElementSibling)
  // input element value
  console.log(target.previousElementSibling.value)
  
  // paragraph element after the button
  console.log(target.nextElementSibling)
  
  // some function to set the color (input value) on the paragraph element
  // paragraph = target.nextElementSibling
  // color = target.previousElementSibling.value
  handleColorChange(paragraph, color);
}

  1. Using the two arguments paragraph and color set the style attribute on the paragraph element using the color.

  2. For bonus points, check the color was valid by looking at the style attribute on the paragraph element using getAttribute('style'). If it returns null the color that was set was not valid (getAttribute).

2 Likes
8

  1. Using an array of colors isn’t going to work. You need to get the input element value.

  2. You have to use a loop for attaching the event listeners to the buttons. querySelectorAll returns a NodeList you can loop using forEach.

btns.forEach((btn) => btn.addEventListener("click", handleColorSubmit));
9

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.