Question 279371 in Javascript Question posted in
A very good W3school tutorial can be found here.

How to change color of text based on user input in Javascript

I would like to change color of the header based on what color the user chooses and types in in the input box provided.

I just can’t figure out how to type correctly

if (user input === color){

document.getElementById("header").style.color ="that color"

in other words if user input equals a color type, change the header color to the color specified.

I’m not sure if adding ids to the list helps in any way, sorry this is one of my first exercises in JS

This is the HTML:

    <h1 id="header"> Hi There </h1>

    <p>Choose from one of the following options!</p>

<ul>
    <li id="darkred">Dark red</li>
    <li id = "darkorange">Dark orange</li>
    <li id = "yellow">Yellow</li>
    <li id = "darkgreen">Dark Green</li>
    <li id = "teal">Teal</li>
    <li id = "navy">Navy</li>
    <li id = "indigo">Indigo</li>
    <li id = "fuchsia">Fuchsia</li>
    <li id = "lavender">Lavender</li>
    <li id = "pink">Pink</li>
</ul>
<input type-"text" id="inp"/>

I mean i could write functions for every one of those colors and that would work, but that would be also be unnecessarily long and dumb and I’m trying to make more general functions here

Tags:

3

Answers


  1. 0

    You can create a button on click of which you will get the input color and then set it.

    But if you want to restrict the user to select only color from the list then you can get all colors and then match from it.

    const button = document.querySelector("button");
const header = document.getElementById("header");

const allColorsEl = document.querySelectorAll("ul > li");
const allColors = [...allColorsEl].map(el => el.id);

button.addEventListener("click", () => {
  const inputColor = document.querySelector("input").value;
  if (header && inputColor && allColors.find(color => color === inputColor)) {
    header.style.color = inputColor
  } else {
    console.log("Select color from list")
  }
})
    <h1 id="header">Hi There</h1>

<p>Choose from one of the following options!</p>

<ul>
  <li id="darkred">Darkred</li>
  <li id="darkorange">Darkorange</li>
  <li id="yellow">Yellow</li>
  <li id="darkgreen">DarkGreen</li>
  <li id="teal">Teal</li>
  <li id="navy">Navy</li>
  <li id="indigo">Indigo</li>
  <li id="fuchsia">Fuchsia</li>
  <li id="lavender">Lavender</li>
  <li id="pink">Pink</li>
</ul>
<input type="text" id="inp" />
<button>change color</button>
    Login or Signup to reply.
  2. 0

    Ig you want to set background color when user provides an input. If yes then you can try this.

    const inputElement = document.getElementById("inp");
const header = document.getElementById("header");

// Listen Event
inputElement.addEventListener('input', function(e) {

    // Check Once the e on console. Before updating header
    header.style.backgroundColor = e.data
})

    Code Explanation

    input – It’s an Event just like click event.
    e – It’s the event. You can call whatever u want.

    Correct Me If I’m Wrong

    Login or Signup to reply.
  3. 0

    Here is an example using click on the LI instead of ppl having to type.
    You show the list anyway so why not?

    Also some colour combinations with the text colour have poor contrast, so using a class you can tweak the foreground colour

    const colorList = document.getElementById('colorDropdown');
const colors = [...colorList.querySelectorAll('li')].map(li => li.className);
colorList.addEventListener('click', (e) => {
  const cls = e.target.closest('li').className;
  if (cls) {
    // Remove all existing color classes from the body
    document.body.classList.forEach((existingCls) => {
      if (colors.includes(existingCls)) {
        document.body.classList.remove(existingCls);
      }
    });

    // Add the new class to the body
    document.body.classList.add(cls);
  }
});
    /* Styles for ul.colorList */

ul.colorList {
  list-style: none;
  padding: 0;
}

ul.colorList li {
  cursor: pointer;
  padding: 5px;
  margin: 5px;
  border: 1px solid #ccc;
  border-radius: 3px;
  display: inline-block;
}



/* Styles for color-specific classes */

.darkred {
  background-color: darkred;
  color: white;
}

.darkorange {
  background-color: darkorange;
  color: white;
}

.yellow {
  background-color: yellow;
  color: black;
}

.darkgreen {
  background-color: darkgreen;
  color: white;
}

.teal {
  background-color: teal;
  color: white;
}

.navy {
  background-color: navy;
  color: white;
}

.indigo {
  background-color: indigo;
  color: white;
}

.fuchsia {
  background-color: fuchsia;
  color: white;
}

.lavender {
  background-color: lavender;
  color: black;
}

.pink {
  background-color: pink;
  color: black;
}
    <h1 id="header"> Hi There </h1>


<p>Choose from one of the following options!</p>

<ul class="colorList" id="colorDropdown">
  <li class="darkred">Dark red</li>
  <li class="darkorange">Dark orange</li>
  <li class="yellow">Yellow</li>
  <li class="darkgreen">Dark Green</li>
  <li class="teal">Teal</li>
  <li class="navy">Navy</li>
  <li class="indigo">Indigo</li>
  <li class="fuchsia">Fuchsia</li>
  <li class="lavender">Lavender</li>
  <li class="pink">Pink</li>
</ul>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search