Change the color of text based on the value of it,via a button with Javascript

Question

I am a newbie to the whole html,css and javascript world. i am required to create a button which changes the color of a text in a span based of the value that is written within a textbox.

This is what i managed to write so far:

function changeColor() {
  var span = document.querySelector("span");
  if (span = 'purple') {
    span.style.color = 'purple';
  }
}

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

.red {
  background-color: red;
}

.blue {
  background-color: blue;
}

.yellow {
  background-color: yellow;
}

.purple {
  background-color: purple;
}

<form>
  <span>This text changes color</span>
  <div>
    <input type="text" value="Type your input here">
  </div>
  <div>
    <input type="button" value="Add Color" onclick="changeColor()">
    <input type="button" value="Clear all colors" onclick="ClearColors()">
  </div>
</form>
<script type="text/javascript" src="Homework3.js"></script>

Mamun · Accepted Answer · 2019-03-09 11:06:50Z

You can use the value of the text input as the class name. Then you can use classList.add() property to add the class on the span element. You also do not need the clear button. You can use classList.remove() property to remove the class in the same function.

Try the following way:

var span = document.querySelector("span");
var prevColor = '';
function changeColor() {
  var currentColor = document.querySelector("input[type='text']").value.trim();
  if(prevColor != '')
    span.classList.remove(prevColor);
  if(currentColor != ''){
    span.classList.add(currentColor);
    prevColor = currentColor;
  }
}

.color {
    color:white;
    background-color: black;
}
.red {
    background-color: red;
}

.blue {
    background-color: blue;
}

.yellow {
    background-color: yellow;
}

.purple {
    background-color: purple;
}

<span>This text changes color</span>
<div>
    <input type="text" placeholder="Type your input here">
</div>
<div>
    <input type="button" value="Add Color" onclick="changeColor()">
</div>

FZs · Accepted Answer · 2019-03-09 12:40:24Z

Simple Solution It is not a good design pattern to hard-code your color classes in the css file since its the user that determine the needed color. You will limit the user's option by hard-coding the colors. what if the user key-in a color not in the css file. In view of the above, i created this solution:

Change the value attribute in input tag to placeholder i.e

From <input type="text" value="Type your input here">
to   <input type="text" placeholder="Type your input here">

Remove this from your html. its not necessary

<input type="button" value="Clear all colors" onclick="ClearColors()">

Replace the code in your javascript function with this

var span = document.querySelector("span");  
  var color = document.querySelector("input").value.trim();  
  span.style.backgroundColor = color;

Here is the full source code:

function changeColor() {
  var span = document.querySelector("span");
  var color = document.querySelector("input").value.trim();
  span.style.backgroundColor = color;
  //If you want to alter the color of text
  //span.style.color = 'any color';  
}

<head>
  <title>Inputs and forms</title>
</head>

<body>
  <form>
    <span>This text changes color</span>
    <div>
      <input type="text" placeholder="Type your input here">
    </div>
    <div>
      <input type="button" value="Add Color" onclick="changeColor()">
    </div>
  </form>
</body>

NOTE: CSS not needed

Collectives™ on Stack Overflow

Change the color of text based on the value of it,via a button with Javascript

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related