How to highlight my text

Question

I have some text and a button. Once user clicks a button I want the text's background to change color to green and back. But nothing happens if I click the button...

Here's the JS script:

<script>
function bright(){
    kontakt = document.getElementById('kontakt');
    kontakt.bgcolor = '#A5DF00';
}
function dark(){
    kontakt = document.getElementById('kontakt');
    kontakt.bgcolor = '#000000';
}
function highlight(){       
    setTimeout(bright() , 1000);
    setTimeout(dark() , 1000);
}
</script>

I call the highlight() from the button's onclick attribute like this: onclick='highlight()'.

The text with id kontakt is always on the page.

Any clue?

Aside from the fact that you're instantly calling the functions and assigning their return values to the `setTimeout` callback (remove the `()` to fix that), you are calling both `bright()` and `dark()` simultaneously... what did you expect to happen? — Niet the Dark Absol, Mar 25 '14 at 17:33
How to add some time between execution of both functions then? — grizeldi, Mar 25 '14 at 17:35
Just change the timeout of `dark()` to 2000, for example (or anything greater than 1000). The difference between the two timeouts is the time that the text will be "highlighted." — Trojan, Mar 25 '14 at 17:36

score 2 · Answer 1 · answered Mar 25 '14 at 17:34

The css property are accessible through the style property:

var kontakt = document.getElementById('kontakt');
function bright(){
    kontakt.style.backgroundColor = '#A5DF00';
}
function dark(){
    kontakt.style.backgroundColor = '#000000';
}

All CSS properties can be accessed the same way. if the property has a dash in it z-index just use the camel case notation.

Ex: kontakt.style.zIndex

you also need to update your setTimeout like so:

function highlight(){       
    setTimeout(bright , 1000);
    setTimeout(dark , 2000);
}

In your case you were calling the functions and passing whatever they return to setTimeout. You also want to change the timer for the first function to happen after a second, and the next follows one second after.

score 0 · Accepted Answer · answered Mar 25 '14 at 17:35

0

According to your code, when highlight() is called it will wait for one second and then turn the background from whatever it was to green and immediately to black, as fast as it possibly can. I'm guessing that you don't see it flash green because that's faster than the browser renders or your eye can detect.

Try changing setTimeout(dark , 1000); to setTimeout(dark , 1500);.

answered Mar 25 '14 at 17:35

potterbm

125
7

2

Remove the `()` otherwise the function is called immediately and its return value used as the timeout callback. – Niet the Dark Absol Mar 25 '14 at 17:37

score 0 · Answer 3 · edited May 23 '17 at 11:52

0

jsfiddle example here modified based on this SO answer.

<span id='kontakt' onClick="highlight(this);">Click me to see me change color and back</span>

function highlight(obj){
   var orig = obj.style.color;
   obj.style.color = '#f00';
   setTimeout(function(){
        obj.style.color = orig;
   }, 5000);
}

edited May 23 '17 at 11:52

Community

1
1

answered Mar 25 '14 at 17:39

display name

4,165
2
27
52

Jamie-505 · Answer 4 · 2015-03-02T15:42:45.210

I would recommend using jquery for this problem. You can download it here. And use it by updating your head-section in your html-document with

<head>
other code...
<script src="directory/where/you/installed/jquery"></script>
</head>

now you can highlight the text with the id 'kontakt' by using following functions:

<script>
$(document).ready(function(){     //this ensures that all elements have been loaded before you are executing any js
    function highlight(){
        $("#kontakt").css("background-color", "#A5DF00");
        setTimeout(function(){
            $("#kontakt").css("background-color", "#000000");
        }, 1000);
    };
// now to execute highlight() by clicking on the button you use
    $("#id-of-the-button").click(highlight();
// there is no further need of the onclick attribute for your button
}
</script>

For more information on how to use jquery you can visit w3schools. They have a lot of very nice tutorials for exactly those tasks.

How to highlight my text

4 Answers4