Defining a html class with a Javascript function

Question

I'm developing a website and I'm having some trouple.. I want to define my class using a Javascript function, like so:

html code:

<script type="text/javascript" src="../js/active_menu.js"></script>
<a id="demo" class="<script>document.write(myFunction('index.php'));</script>" href="index.php">Home</a>

javascript code:

function myFunction(menu_punkt)
{
var state = 'not_active'
var a = document.URL.split("//");
a = (a[1] ? a[1] : a[0]).split("/"); 
a = a[1];

if (menu_punkt == a){
    state = 'navactive';
}
return state
}

I'm not sure... It should make the class="navactive" and then my menu button should be blue, but it doesn't happen. And it works if I just put in class="navactive" — Simon Larsen
– Simon Larsen, Commented Dec 21, 2012 at 17:53
Could you please explain what you're trying to achieve so we may better help? but from what I see it looks like you're trying to set the home link to a class based on whether or not you're on that current page? — zer0bit
– zer0bit, Commented Dec 21, 2012 at 17:53

Jeremy Roman · Accepted Answer · 2012-12-21 17:51:44Z

2

You can't use the <script> tag inside an attribute. Probably the simplest change would be to do this:

<script type="text/javascript" src="../js/active_menu.js"></script>
<script>document.write('<a id="demo" class="' + myFunction('index.php') + '" href="index.php">Home</a>');</script>

If you want your page to be more accessible to users with JavaScript disabled, or you want to allow the DOM to continue to load without blocking on JS execution, you might consider an approach that changes the element after the fact instead.

answered Dec 21, 2012 at 17:51

Jeremy Roman

16.3k1 gold badge45 silver badges44 bronze badges

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

Comments

Halcyon · Accepted Answer · 2012-12-21 17:51:01Z

2

Use the className property:

document.getElementById("demo").className = myFunction('index.php');

Make sure you call this after demo has been added to the DOM, else document.getElementById("demo") will fail.

answered Dec 21, 2012 at 17:51

Halcyon

57.8k10 gold badges93 silver badges131 bronze badges

Comments

the_marcelo_r · Accepted Answer · 2012-12-21 17:59:00Z

0

First, remove the <script> tags from the 'class' value, you can make this much more elegant with JQuery:

$(document).ready(function() {
    $('#demo').addClass(myFunction('index.php'))
});

function myFunction(menu_punkt)
{
    var state = 'not_active'
    var a = document.URL.split("//");

http://docs.jquery.com/Tutorials:Introducing_$%28document%29.ready%28%29

*If you don't want to hardcode the name of your page in your function's argument, you can sort something out with 'window.location.href' and the 'substr' function.

http://www.w3schools.com/jsref/jsref_substr.asp

answered Dec 21, 2012 at 17:59

the_marcelo_r

1,85623 silver badges36 bronze badges

Collectives™ on Stack Overflow

Defining a html class with a Javascript function

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related