Change Element Id with Javascript, if...else if...else_问答_开发者

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

开发者 https://www.devze.com 2023-01-16 02:43 出处：网络

I\'m trying to create an if...else if...else argument where the only variable is the current Access Level number. This will determine what content to display to the user, so that someone with level 1

相关专题：css javascript

I'm trying to create an if...else if...else argument where the only variable is the current Access Level number. This will determine what content to display to the user, so that someone with level 1 will see one thing while someone with level 0 will see another.

By default everything is hidden, but once someone goes to the web page the Javascript is supposed to change the ID of the element to show the appropriate content. I'm not quite sure what I'm doing wrong but it's not changing the ID as it should. If I'm going about this the wrong way please let me know what other alternatives there may be.

<html>
<body>


<style type="text/css">
#AccessLevel1Hide {display: none; }
#AccessLevel1Show {display: block; }
#AccessLevel0Hide {display: none; }
#AccessLevel0Show {display: block; }
</style>


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

if (AccessLevel == 1){
   document.getElementById('AccessLevel1Hide').id="AccessLevel1Show";
}else if (AccessLevel == 0){
   document.getElementById('Acces开发者_运维问答sLevel0Hide').id="AccessLevel0Show";
}else {document.write("ERROR");
}
</script>


<div id="AccessLevel1Hide">
Access Level 1 message.
</div>

<div id="AccessLevel0Hide">
Access Level 0 message.
</div>


</body>
</html>

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.

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.

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.

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

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.