CODEWITHSUNDEEP
javascripthtml
grizeldi
grizeldi

Reputation: 180

How to highlight my text

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?

Upvotes: 0

Views: 86

Answers (4)

Jamie-505
Jamie-505

Reputation: 1260

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.

Upvotes: 0

display name
display name

Reputation: 4185

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);
}

Upvotes: 0

potterbm
potterbm

Reputation: 125

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);.

Upvotes: 0

Ibu
Ibu

Reputation: 43810

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.

Upvotes: 2

Related Questions