CODEWITHSUNDEEP
javascript
Ankit
Ankit

Reputation: 35

JavaScript function on page load

I need to change the Div id "Div01" state to "highlight" class when the page loads.
Please see the code below:

HTML:

<div id="div01"><a href="#" class="btn" onclick="roleActive(this);">user</a></div>

JS:

var role; function roleActive(obj){ if (role)
role.className = 'btn';
obj.className = 'highlight';
role = obj;}

CSS:

.btn{
display:block;
height:25px;
width:100px;
padding:5px 0px 0px 0px;
text-align:center;
font-size:16px;} 

.highlight{
cursor:default;
display:block;
height:25px;
width:100px;
padding:5px 0px 0px 0px;
text-align:center;
font-size:16px;
background-color:#FFF;
border-bottom:4px solid #F0AB00;
color:#000;
text-decoration:underline;}

a.btn:link{background-color:#000;color:#FFF;}
a.btn:visited{background-color:#000;color:#FFF;}
a.btn:hover,active{background-color:#FFF;color:#000;text-decoration:underline; border-bottom:4px solid #F0AB00;}

Kindly help me to fix the problem.

Upvotes: 0

Views: 101

Answers (5)

David Gilbertson
David Gilbertson

Reputation: 4883

Your onclick event is sending 'this' to the function, but it's the onclick event of the , not of the . Is this what you intended?

Since you're not using the inherent click functionality of the then I'd suggest getting rid of it. Just have the click event on the , so clicking it will fire roleActive() and apply the classes appropriately.

Upvotes: 0

Arun P Johny
Arun P Johny

Reputation: 388436

Try

<script>
    window.onload = function(){
        roleActive(document.getElementById('div01').children[0]);
    }
</script>

Upvotes: 2

user1526546
user1526546

Reputation:

For Javascript:

window.onload = function() {
        document.getElementById('div01').className = 'highlight';
}

For Jquery:

$(function() {
  $('#div01').addClass('highlight');
});

Upvotes: 0

Alex
Alex

Reputation: 35407

document.addEventListener('DOMContentLoaded', function(){
    document.getElementById('div01').className = 'highlight';
}, false);

Upvotes: 1

PSR
PSR

Reputation: 40348

try this

window.onload = function(){
    document.getElementById('div01').className = 'highlight'
}

or

<script>
 document.getElementById('div01').className = 'highlight'
</script>

or

<script>
exampleCall();
function exampleCall()
{
 document.getElementById('div01').className = 'highlight'
}
</script>

Upvotes: 1

Related Questions