javascript not changing the text color

Question

I have a function that I want to change the font color of the user entered string if it is equal to a certain word located in an array.. So far when I step through it it says that it changes the font color but it actually never updates it to the screen and I don't know why. Here is what I have so far

function getLastWord() {
    var input = document.getElementById("my_text");
    //var input = document.getElementById(textArea.value);
    //var lineIn = document.getElementById(my_text).innerHTML;
    var inputValue = input.value;
    var lastWordTyped
    var changeColorOfWord;

    if (input == null) {
        input == " ";
    }

    //lastWordTyped = input.substr(input.trim().lastIndexOf(" ") + 1);
    lastWordTyped = inputValue.substr(inputValue.trim().lastIndexOf(" ") + 1);

    if (input != null) {

        for (var i = 0; i < reservedKeyWords.length; i++) {
            if (reservedKeyWords[i] === lastWordTyped) {
                lastWordTyped = lastWordTyped.fontcolor("blue");
                my_text.replace(inputValue, lastWordTyped);
            } else {

            }


        }
    }
}

You can't change the color of a text inside a input element, you must use a content editable element. — Ortiga
– Ortiga, Commented Sep 9, 2014 at 19:36

Jason · Accepted Answer · 2014-09-09 19:36:58Z

1

I see two issues with the code thus far.

You are using 'fontcolor("blue")' parameter on the lastWordTyped. The proper syntax to change color is element.style.color="#CCC".
You will need to wrap the last typed word in a span so you can target it and apply the color to just that word.

answered Sep 9, 2014 at 19:36

Jason

4,1594 gold badges24 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Henrik Karlsson Over a year ago

Actually, fontcolor is a working function even if it's really old. developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…

bbesase Over a year ago

How do I wrap it in a span? I got the color working now, but now it makes every word blue lol

Xyz · Accepted Answer · 2017-11-06 10:44:54Z

1

string.fontcolor is legacy, and should not be used even though I could see it as a viable option in this case

Essentially, what you are doing is adding font tags around the word:

var txt = 'hello world';
txt = txt.fontcolor('blue');
//txt = '<font color="blue">hello world</font>';

You do not show what you do with the result, but if you actually put it in an HTML element it should work, even though instead of using fontcolor, I'd rather use element.style.color. This would require slightly more work though:

var ele = document.querySelector('#my_text');
ele.style.color = 'blue';
ele.innerHTML = lastWordTyped;

If you still want to go with the .fontcolor method, you could just keep what you have in the question and add

input.innerHTML = my_text;

edited Nov 6, 2017 at 10:44

Xyz

6,0416 gold badges43 silver badges60 bronze badges

answered Sep 9, 2014 at 19:35

Henrik Karlsson

5,7634 gold badges28 silver badges43 bronze badges

2 Comments

bbesase Over a year ago

Thank you so much! This worked, although now it makes every word blue, it doesnt stop after checked the last word lol

Henrik Karlsson Over a year ago

I think I added the simple solution as the last option

Collectives™ on Stack Overflow

javascript not changing the text color

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related