Switch the color value from black to red with a click in JavaScript

Question

Switch the color value from black to red with a click in JavaScript

I am currently developing an app and I'm in the process of creating a function that gradually changes the color from black to red based on a numerical value. For instance, if a user selects a number ranging from 0 to 100, they can click a button up to 100 times until they reach a point where clicking is no longer allowed. As they progress, I want the color to transition from black to full red.

Color Progression: Number 0 = black -> Number 100 = full red

Below is the function for incrementing a number onclick:

<input type="text" id="inc" value="0" readonly="readonly"></input>

i = 0; // Default value shown on counter
x = 0; // Maximum value set by the user

function adicionar()
{
 if( i < x)
 {
  i++;
  document.getElementById('inc').value = i;
 }
}

This is my attempted code logic:

a = x * 50 / 100
b = x * 80 / 100
c = x * 100 / 100

if(i == a){
 var $$ = Dom7;
 $$('body').addClass('yellow');
}
if(i == b){
 var $$ = Dom7;
 $$('body').addClass('red');
}
if(i == c){
 var $$ = Dom7;
 $$('body').addClass('red2');
}

Thank you for your assistance!

javascript html jquery css html-framework-7

Answer 1

Answer №1

let userNumberChoosen = 10 //assuming the value ranges from 0 to 10, but can be any number
let start = 0;
const changeColor = () => {
    const r = 255 * start/userNumberChoosen;
    const b = 0;
    const newColor ='rgb('+r+','+b+',0)';
document.getElementById("change").style.backgroundColor = newColor;
  start += 1;  //increment color step
}

<html>
  <body>
    <div> Pay attention to my background color </div>
    <div id="change">.</div> 
    <button onClick="changeColor()">Alter background</button>
  </body>
  
</html>

Answer 2

let userNumberChoosen = 10 //assuming the value ranges from 0 to 10, but can be any number
let start = 0;
const changeColor = () => {
    const r = 255 * start/userNumberChoosen;
    const b = 0;
    const newColor ='rgb('+r+','+b+',0)';
document.getElementById("change").style.backgroundColor = newColor;
  start += 1;  //increment color step
}

<html>
  <body>
    <div> Pay attention to my background color </div>
    <div id="change">.</div> 
    <button onClick="changeColor()">Alter background</button>
  </body>
  
</html>

Answer 3

Answer №2

Give this a try, assuming x represents the limit, the function getRed will provide a shade of red.

let i = 0, x = 100;
document.getElementById("btn").addEventListener ('click', () => {
  add ()
});
function getRed ( index, limit ) {
    return Math.floor(index*255/limit);
}
function add() {
  if( i < x ) {
      i++;
      const inp = document.getElementById('inc');
      inp.value = i;
      const red = getRed ( i, x );
      inp.style.color = `rgb(${red},0,0)`;;
  } else {
    alert('limit exceeded');
  }
}

Answer 4

Give this a try, assuming x represents the limit, the function getRed will provide a shade of red.

let i = 0, x = 100;
document.getElementById("btn").addEventListener ('click', () => {
  add ()
});
function getRed ( index, limit ) {
    return Math.floor(index*255/limit);
}
function add() {
  if( i < x ) {
      i++;
      const inp = document.getElementById('inc');
      inp.value = i;
      const red = getRed ( i, x );
      inp.style.color = `rgb(${red},0,0)`;;
  } else {
    alert('limit exceeded');
  }
}

Answer 5

Answer №3

const maxLength = 500;
const textLength = inputText.length; 

const percentageRemaining = ((maxLength - textLength) * 10) / maxLength;
const greenBlueValue = 15.2 * percentageRemaining;
const colorShift = `rgb(152, ${greenBlueValue}, ${greenBlueValue})`; 
//color transitions from gray to red

Answer 6

const maxLength = 500;
const textLength = inputText.length; 

const percentageRemaining = ((maxLength - textLength) * 10) / maxLength;
const greenBlueValue = 15.2 * percentageRemaining;
const colorShift = `rgb(152, ${greenBlueValue}, ${greenBlueValue})`; 
//color transitions from gray to red

Switch the color value from black to red with a click in JavaScript

Answer №1

Answer №2

Answer №3

Similar questions

Struggling with incorporating a view using ui router

Are your Fixed Action Buttons experiencing issues?

Security measures within the browser are blocking access to the same-domain Ajax request made using jQuery, resulting in an "Access is

What is the best way to enlarge a Material UI card?

How to retrieve the id of a different view using Backbone

Ways to check if an array is empty in Typescript

CSS issue encountered: "Value of property is not valid"

Attempting to embed a Java applet into an HTML document

Switching the markLine in vega lite to a markBar causes it to lose its sorting arrangement

Using Angular Ionic for a click event that is triggered by a specific class

Sending a prop to a handler causes issues with navigation paths

Convert text into a clickable link

Experiencing difficulty when attempting to save a zip file to the C drive

What are some ways I can receive a response promptly from a service in AngularJS?

Organizing items within a group

Unable to retrieve an image from various sources

Enhance JSON object with texture using three.js

JavaScript: Show Loading Screen until certain assets are fully loaded

Node Js enables the establishment of a unique connection between one entity to

What steps do I need to take to successfully implement a $.fn. function that runs automatically when it is called?