Using Javascript to control an HTML block
Question
I have an HTML block on my web page. I want to be able to toggle it on and off based on a Javascript variable.
I've tried adding the string of HTML in the Javascript code (HTML inner), but it's a large enough block that I can't help but think there is a better way.
What I would really like to do is (in pseudo code):
if (adminLevel === 200) {
<enable a block of code that include a number of tables and forms in HTML>
}
or in code, something like:
<Title>Test</title>
<h2>Some Stuff here</h2>
<!-- Admin Stuff -->
<a href="Slowdown.html">Click here to slow down</a>
<a href="speed up.html">Click here to speed up</a>
<table><tr><td>Status</td></tr><tr><td>Running</td></tr></table>
<!-- End admin stuff -->
</body>
</html>
<script>
if (adminLevel === 200) { ** enable block ** }
</script>
Years ago I think I did something like this is ASP, but today I am working with Javascript.
Any ideas?
5 answers
solution1
0 2019-04-11 16:02:22
Give the HTML element an ID for example
<div id="test" style="display:none">
<script>
if (adminLevel == 200) {
document.getElementById('test')style.display = 'block'
}
else{
document.getElementById('test')style.display = 'none'
}
</script>
solution2
0 2019-04-11 16:04:46
If i understood your question right, i think you want to show/hide a block of html code based on js variable You could you jquery for that. Give that div a class in html So whenever document is ready you could hide it by $(".class_name").hide(); and to display use if(condition){$(".class_name").show();}
solution3
0 2019-04-11 16:06:27
var adminLevel = 200; if (adminLevel === 200) { document.getElementById("admin-block").style.display = "block"; }
#admin-block { display:none }
<!doctype html> <html> <head> <Title>Test</title> </head> <body> <h2>Some Stuff here</h2> <div id="admin-block"> <!-- Admin Stuff --> <a href="Slowdown.html">Click here to slow down</a> <a href="speed up.html">Click here to speed up</a> <table><tr><td>Status</td></tr><tr><td>Running</td></tr></table> <!-- End admin stuff --> </div> </body> </html>
This could show the block if adminLeve = 200 , but you shouldn't do backend things in javascript. User has acces to javascript, so in this everyone cat get to your block of code.
If you want to check if the user is admin, do it using a server side scripting language (for example PHP). There you should check the role of user and if is admin, then you can render the content for admins.
solution4
0 ACCPTED 2019-04-11 16:10:53
To add to Andrew's comment about adding an ID to the section, you should also wrap your block of HTML in a <div> tag and put the ID on that , not the sections alone.
HTML:
<!-- Admin Stuff -->
<div id="example-id">
<a href="Slowdown.html">Click here to slow down</a>
<a href="speed up.html">Click here to speed up</a>
<table><tr><td>Status</td></tr><tr><td>Running</td></tr></table>
</div>
<!-- End admin stuff -->
and for the JavaScript:
if (adminLevel == 200) {
document.getElementById('example-id').style.display = 'block'
}
else{
document.getElementById('example-id').style.display = 'none'
}
This way you hide the whole block with one line in JavaScript, rather than having to hide each individual piece.
Edit: Also as someone else has noted, this is not a very secure method of handling admin access. You should probably be handling this in whatever server-side language you're using (ASP/JSP/PHP/etc.) rather than JavaScript.
solution5
0 2019-04-11 16:18:10
you can use knockout I rewrite your example
// simulation result var adminLevel = 200 var ViewModel = function() { this.AdminLevel = ko.observable(); }; var model = new ViewModel() ko.applyBindings(model); model.AdminLevel(adminLevel)
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script> <h2>Some Stuff here</h2> <!-- Admin Stuff --> <!-- ko if: AdminLevel() === 200 --> <a href="Slowdown.html">Click here to slow down</a> <a href="speed up.html">Click here to speed up</a> <table><tr><td>Status</td></tr><tr><td>Running</td></tr></table> <!-- /ko --> <!-- End admin stuff -->
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.