How to change input background color dynamically?

Question

I have a custom Time-picker like this.

I want to change input background color when I click It and If I click another one the previous one bg should be white. But when I click second or etc previous one don't back to normal bg.

  const [hours, setHours] = useState('09')

  const onClickHours = (e) => {
    e.preventDefault();
    setHours(e.target.value)
  }

  const onClickFullTime = (e) => {
    e.preventDefault();
    setFullTime(e.target.value)
    getTime(e.target.value);
    changeColor(e);
  }

  const changeColor = (e) => {
    
      let currentColor = e.target.attributes['data-color'].value;
      let newColor = currentColor === "#fff" ? "#40a9ff" : "#fff";
      e.target.style.backgroundColor = newColor;
      e.target.setAttribute('data-color' , newColor);
  }


  

  const getTime= (fullTime) => {
    onSelectTime(fullTime)
  }

  const hoursArray = [];
  for (let i = 9; i < 22; i++) {
    if (i < 10) {
      i = '0' + i;
    }
    hoursArray.push(
      <input key={i}  onClick={onClickHours} value={i} readOnly />
    )
  }

  const fullTimeArray = [];
  for(let j = 0; j < 60; j = j + 5){
    fullTimeArray.push(hours + ":" + (j< 10 ? '0' + j : j))
  }


              <div className="timepicker">
                <div className="hours">
                  {hoursArray}
                </div>
                <div className="full-time">
                  {
                  fullTimeArray.map((time, index) => (
                    <input name="fullTime" data-color="#fff" key= 
                    {index} onClick={onClickFullTime} value={time} 
                    readOnly/>
                    ))}
                </div>
             </div>

after click to input

Are you sure that data-color property will work with input box? I don't think so. — rnr, Oct 05 '21 at 18:06

score 1 · Accepted Answer · answered Oct 06 '21 at 12:27

Try this :

import React, { useState, useEffect } from 'react';
import './style.css';

export default function App() {
  const [hours, setHours] = useState('09');
  const [currentInput, setCurrentInput] = useState('');

  const fullTimeArray = [];
  for (let j = 0; j < 60; j = j + 5) {
    fullTimeArray.push(hours + ':' + (j < 10 ? '0' + j : j));
  }

  const onClickFullTime = (e) => {
    e.preventDefault();
    setCurrentInput(e.target.value);
  };

  useEffect(() => {
    changeColor(currentInput);
  }, [currentInput]);

  const changeColor = (current) => {
    const inputElem = document.querySelectorAll("input[name='fullTime']");

    inputElem.forEach((elem) => {
      if (elem.value === current) {
        elem.style.backgroundColor = '#40a9ff';
      } else {
        elem.style.backgroundColor = '#fff';
      }
    });
  };

  return (
    <div className="timepicker">
      <div className="full-time">
        {fullTimeArray.map((time, index) => (
          <input
            name="fullTime"
            key={index}
            onClick={onClickFullTime}
            value={time}
            readOnly
          />
        ))}
      </div>
    </div>
  );
}

(No need data-color)
Create a state (currentInput in my example) where you store the current value of the clicked input (see onClickFullTime function)
When the value of currentInput changes, useEffect passes it to the changeColor function

Demo : Stackblitz

Thanks. It works. But I found another way. Just change the inputs to button and add a dynamic className 'active'. It solves all my problem. — Rabbi Musayev, Oct 06 '21 at 20:01

Codeburned · Answer 2 · 2021-10-06T12:54:34.703

If only one should be set at a time just give each button a dynamic html id attribute (just timebutton + i value or something unique) and store that in a variable. When a button is clicked set the stored id (if it exists) to have no background and also set the clicked button to be the stored id, setting its background.

You should only need to keep track of the buttons that are highlighted and update them.

EDIT: I will elaborate further, client side Javascript is needed for the solution I mentioned above example of node.js client side.

Here is an example I have made for simple client side js to highlight a clicked button storing the id and resetting it when clicking another.

var buttonNumId = ""; // variable for saving the currently highlighted element Id
function myFunction(clickedElement) {
  // unhighlight the current element
  if (buttonNumId !== "") document.getElementById(buttonNumId).style.background = "white";
  // set the currently clicked element and change its color
  buttonNumId = clickedElement.id;
  clickedElement.style.background = "red";
  // update the textbox for demo purposes
  document.getElementById("demo").innerHTML = "Button Id: " + buttonNumId;
}

<!DOCTYPE html>
<html>

<body>

  <h1>Highlight on click</h1>

  <button id="Button1" style="background-color: white;" onclick="myFunction(this)">Click me 1</button>
  <button id="Button2" style="background-color: white;" onclick="myFunction(this)">Click me 2</button>
  <button id="Button3" style="background-color: white;" onclick="myFunction(this)">Click me 3</button>
  <button id="Button4" style="background-color: white;" onclick="myFunction(this)">Click me 4</button>

  <p id="demo"></p>

</body>

</html>

Your answer would be clearer, if you'll provide some code example with the explanation. — nakashu, Oct 06 '21 at 11:52
Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). — Community, Oct 06 '21 at 11:52

How to change input background color dynamically?

2 Answers2