can't change text color with jQuery while getting color from user

Question

I have a code of jQuery and HTML. The code is suppose to enable the user to change text color when clicking and also choose the color that the text should be changed to. However, I'm having a bit of trouble. When I write blue in the textarea, it always change the text color to black. The second problem is that when I click "Show me the color of the text" it shows color with rgb. Is there any way to make it show the color's name?

Here is the code:

<!DOCTYPE html>
<html>

<head>
<title>Change Color of Text</title>
<script src="jquery-1.11.0.min.js"></script>
<script>
$(document).ready(function () {
var TextColor = $("#text").css("color");
var ColorToChangeTo = $("#ColorToChange").text();
$("#GetColor").click(function () {
$("#ShowColor").text("The text color is " + TextColor);
});
$("#ChangeColor").click(function () {
$("#text").css("color", ColorToChangeTo);
});
});
</script>
</head>

<body dir="ltr" style="font-family: calibri;">
<center>
<div id="text" style="color: red;">
Hello, I am a text.
<br>Click the button below to see what is my color. If you want to change my color,
<br>enter the color that you want me to be displayed in and push the button "Change text color!"
    </div>
    <input type="button" id="GetColor" value="Show me the text's color!" />
    <br>
    <div id="ShowColor"></div>
    <input type="text" id="ColorToChange" />
    <br>
    <input type="button" id="ChangeColor" value="Change text color!" />
</center>
</body>

</html>

score 1 · Answer 1 · edited May 23 '17 at 11:49

This should solve your first issue:

<!DOCTYPE html>
<html>
<head>
<title>Change Color of Text</title>
<script>
$(document).ready(function () {

$("#GetColor").click(function () {
    var TextColor = $("#text").css("color");
    $("#ShowColor").text("The text color is " + TextColor);
});
$("#ChangeColor").click(function () {
    var ColorToChangeTo = $("#ColorToChange").val();
    $("#text").css("color", ColorToChangeTo);
});
});
</script>
</head>

<body dir="ltr" style="font-family: calibri;">
<center>
<div id="text" style="color: red;">
Hello, I am a text.
<br>Click the button below to see what is my color. If you want to change my color,
<br>enter the color that you want me to be displayed in and push the button "Change text color!"
    </div>
    <input type="button" id="GetColor" value="Show me the text's color!" />
    <br>
    <div id="ShowColor"></div>
    <input type="text" id="ColorToChange" />
    <br>
    <input type="button" id="ChangeColor" value="Change text color!" />
</center>
</body>

</html>

In particular:

$("#ChangeColor").click(function () {
    var ColorToChangeTo = $("#ColorToChange").val();
    $("#text").css("color", ColorToChangeTo);
});

You have to get the color inserted by the user every time the button is clicked (if you run $("#ColorToChange").val(); only at the loading of the page, it will keep the value at that particular moment and won't refresh).

To get the content of an Input, use .val() instead of .text(). The first one reads the value of the input, the second is used for retrieving the text inside a tag (<span>This is text that would be retrieved by .text()</span>)

Regarding the second request:

Is there any way to make it show the color's name?

Returning name of colors using jQuery

score 0 · Answer 2 · edited May 23 '17 at 12:28

0

You can do that with color_classifier.js plugin. It works good and returns the name of nearest color that has name.

This is a question may be answered previously in stackoverflow here or here

edited May 23 '17 at 12:28

Community

1
1

answered Feb 09 '14 at 14:03

0_0

107
9

can't change text color with jQuery while getting color from user

2 Answers2