ansaurus

Question

Change Element Id with Javascript, if...else if...else

Answer 1

A:

When you change AccessLevel1Hide to AccessLevel0Hide the second getElementById fetches the first div (for which you have changed the ID in the first step.)

So what you would need to do, is to change AccessLevel1Hide to say AccessLevelTempHide, change AccessLevel0Hide to AccessLevel1Hide and them change AccessLevelTempHide to AccessLevel0Hide.

I suggest you use CSS classes, rather than changing ids.

Rahul 2010-09-10 00:35:46

Answer 2

+2 A:

Much easier to use a class, like this:

see http://jsfiddle.net/hJ6gd/8/

<html>
<body>


<style type="text/css">
 .hide {display: none; }
 .show {display: block; }
</style>


<script type="text/javascript">
var AccessLevel = (1);

if (AccessLevel == 1){
   document.getElementById('AccessLevel1').setAttribute("class", "show");
}else if (AccessLevel == 0){
   document.getElementById('AccessLevel0').setAttribute("class", "show");
}else {document.write("ERROR");
}
</script>


<div id="AccessLevel1" class="hide">
Access Level 1 message.
</div>

<div id="AccessLevel0" class="hide">
Access Level 0 message.
</div>


</body>
</html>

However, it should be noted this is not at all secure -- all they have to do is view source to see everything.

Hogan 2010-09-10 00:36:33

Thanks so much, makes far more sense than the way I was trying to do it! I would like to note that by adding the "hide" class it didn't work, so what I did was remove the hide class completely and instead use #AccessLevel1 {display: none; } to hide it. I then used #AccessLevel1 .show {display: block; } to display it. There are other systems in place to secure the page; this code is just used to display links they won't be able to access if they don't have the level anyway. Thanks for bringing it up though!

Edvard D 2010-09-10 14:15:53

EDIT: I thought it worked, but after a bit more testing I found that it didn't. When I change the AccessLevel to 2, it displays ERROR as it should. When I change it to either 1 or 0 it displays nothing. The .document.write option works perfectly, but for some reason the other arguments I try to use (like above) do not work with if...else if...else. Is there some secret step I'm missing?

Edvard D 2010-09-10 14:29:10

Edvard: I'd need to see the code -- modify my jsfiddle and I can look at it.

Hogan 2010-09-11 15:16:05

Answer 3

A:

I believe a better approach would be to leave the ID's static and add a class that changes. Or, alternatively, you can just change the .style.display of each element, rather than the id.

Robert 2010-09-10 00:37:24

This was the first thing I tried but it ended up not working either. For some reason everything I've tried except .document.write isn't working. I may end up just having to use that.

Edvard D 2010-09-10 14:31:13

Answer 4

+1 A:

I've never tried to change an element ID before, I'm not sure it makes sense. You should do this with classes, not IDs, so your CSS is .AccessLevel1Hide etc. and change the classes.

But the real problem is trusting this to the client / browser. I can trivially change my access level, or just view the page source and see everything for every access level.

These checks should be done server-side, and only the appropriate content delivered to the browser.

Stephen P 2010-09-10 00:38:25

I won't be displaying any sensitive information with this. I'm trying to create some script for a specific platform that doesn't give the users access to the source code, so it's hard to add any type of "advanced" functionality. In the end it'll probably be used to display different links/options to depending on the AccessLevel, so if they click it they still won't be able to access it as the core system will keep them out.

Edvard D 2010-09-10 14:36:36

Answer 5

A:

I think you should use style.display property

if (AccessLevel == 1){
    document.getElementById('AccessLevel1Hide').style.display = "block";
    document.getElementById('AccessLevel0Hide').style.display = "none";

}else if (AccessLevel == 0){
    document.getElementById('AccessLevel1Hide').style.display = "none";
    document.getElementById('AccessLevel0Hide').style.display = "block";

}else {document.write("ERROR");
}

unigg 2010-09-10 00:41:27

This was the first thing I tried but it ended up not working either. For some reason everything I've tried except .document.write isn't working. I may end up just having to use that.

Edvard D 2010-09-10 14:30:51

ansaurus

tags:

views:

answers:

Change Element Id with Javascript, if...else if...else

related questions