Question: id in the JavaScript function shows that number, say 5. The <div> id also shows that number, like 5. Inspect the page to confirm.Repl link:
{% for setting in settings %}
{% if setting[1] | string | regex('^\\[.*') %}
<p>{{ setting[0] }} :</p>
{% for username in setting[1] %}
<ul>
<li>{{ username }}</li>
</ul>
{% endfor %}
{% else %}
<script>
function ShowAndHide() {
var x = document.getElementById('{{settings.index(setting)}}');
if (x.style.display == 'none') {
x.style.display = 'block';
} else {
x.style.display = 'none';
}
}
</script>
<p>{{ setting[0] }} : {{ setting[1] }}</p>
<button onclick="ShowAndHide();">Change</button>
<div id="{{settings.index(setting)}}" style="display:none">
<form method='post' action='/admin/edit/{{setting[0]}}'>
<label for='new-setting'>New Setting:</label>
<input type='text' name='new-setting' required>
<input type='submit' value='Edit'>
</form>
</div>
{% endif %}
<hr>
{% endfor %}
2 Likes
To be honest, it would be easier to follow this code if there was a Repl link, there’s a bunch of Python Flask? templating stuff mixed in with the HTML so just seeing what the resulting HTML would look like would be a little easier to understand (at least for me and my tired brain).
1 Like
@MattDESTROYER No, actually the backend isn’t important. Context: settings is a list of lists. setting is each individual list. setting[0] is the name of the setting; setting[1] is the value.
1 Like
Matt was saying he’d like to see the resulting HTML, rather than the Jinja.
1 Like
Demo:
Btw @QwertyQwerty88 (and the others listed) You’ll be an auto mod when you join. I can pm you for more info if you want, or if you want to opt out.
2 Likes
NateDhaliwal:
Demo:
That video isn’t loading for me.
Oh thanks!
1 Like
Yeah that works. I think it’d be helpful to show the DOM in devtools.
1 Like
@NateDhaliwal what do you mean by
Where can I find the DOM?
In Firefox it says “Inspector”. It’s the default thing that shows up when you open the developer tools.
1 Like
You want the raw HTML, basically?
1 Like
Yeah, that’s the DOM. Document Object Model
1 Like
Okay, you might have to wait a while. I’m not on my laptop now.
1 Like
@QwertyQwerty88
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Admin</title>
<link rel="stylesheet" type="text/css" href="/static/style.css">
<!--
<style>
body {
margin-left: 20%; /* matching width of sidebar */
}
</style>
-->
</head>
<body>
<script>
function ShowAndHide() {
var x = document.getElementById('0');
if (x.style.display == 'none') {
x.style.display = 'block';
} else {
x.style.display = 'none';
}
}
</script>
<p>Creator : NateDhaliwal</p>
<button onclick="ShowAndHide();">Change</button>
<div id="0" style="display:none">
<form method='post' action='/admin/edit/Creator'>
<label for='new-setting'>New Setting:</label>
<input type='text' name='new-setting' required>
<input type='submit' value='Edit'>
</form>
</div>
<hr>
<script>
function ShowAndHide() {
var x = document.getElementById('1');
if (x.style.display == 'none') {
x.style.display = 'block';
} else {
x.style.display = 'none';
}
}
</script>
<p>Mods : Edit Topic Title : True</p>
<button onclick="ShowAndHide();">Change</button>
<div id="1" style="display:none">
<form method='post' action='/admin/edit/Mods : Edit Topic Title'>
<label for='new-setting'>New Setting:</label>
<input type='text' name='new-setting' required>
<input type='submit' value='Edit'>
</form>
</div>
<hr>
<script>
function ShowAndHide() {
var x = document.getElementById('2');
if (x.style.display == 'none') {
x.style.display = 'block';
} else {
x.style.display = 'none';
}
}
</script>
<p>Mods : Delete Reply : True</p>
<button onclick="ShowAndHide();">Change</button>
<div id="2" style="display:none">
<form method='post' action='/admin/edit/Mods : Delete Reply'>
<label for='new-setting'>New Setting:</label>
<input type='text' name='new-setting' required>
<input type='submit' value='Edit'>
</form>
</div>
<hr>
<script>
function ShowAndHide() {
var x = document.getElementById('3');
if (x.style.display == 'none') {
x.style.display = 'block';
} else {
x.style.display = 'none';
}
}
</script>
<p>Mods : Edit Reply : False</p>
<button onclick="ShowAndHide();">Change</button>
<div id="3" style="display:none">
<form method='post' action='/admin/edit/Mods : Edit Reply'>
<label for='new-setting'>New Setting:</label>
<input type='text' name='new-setting' required>
<input type='submit' value='Edit'>
</form>
</div>
<hr>
<script>
function ShowAndHide() {
var x = document.getElementById('4');
if (x.style.display == 'none') {
x.style.display = 'block';
} else {
x.style.display = 'none';
}
}
</script>
<p>Mods : Edit Topic Content : False</p>
<button onclick="ShowAndHide();">Change</button>
<div id="4" style="display:none">
<form method='post' action='/admin/edit/Mods : Edit Topic Content'>
<label for='new-setting'>New Setting:</label>
<input type='text' name='new-setting' required>
<input type='submit' value='Edit'>
</form>
</div>
<hr>
<p>Mods :</p>
<ul>
<li>NateDhaliwal | Admin</li>
</ul>
<ul>
<li>Anonymous1 | Admin</li>
</ul>
<ul>
<li>Firepup650 | Mod</li>
</ul>
<ul>
<li>CoderElijah | Mod</li>
</ul>
<ul>
<li>QwertyQwerty88 | Mod</li>
</ul>
<ul>
<li>not-ethan | Grim Cyclemaster</li>
</ul>
<ul>
<li>faries-feast</li>
</ul>
<hr>
<p>Admins :</p>
<ul>
<li>NateDhaliwal | Admin</li>
</ul>
<ul>
<li>Anonymous1 | Admin</li>
</ul>
<hr>
<script>
function ShowAndHide() {
var x = document.getElementById('7');
if (x.style.display == 'none') {
x.style.display = 'block';
} else {
x.style.display = 'none';
}
}
</script>
<p>Forum Name : NDForum</p>
<button onclick="ShowAndHide();">Change</button>
<div id="7" style="display:none">
<form method='post' action='/admin/edit/Forum Name'>
<label for='new-setting'>New Setting:</label>
<input type='text' name='new-setting' required>
<input type='submit' value='Edit'>
</form>
</div>
<hr>
</body>
</html>
2 Likes
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Admin</title>
<link rel="stylesheet" type="text/css" href="/static/style.css">
</head>
<body>
<p>Creator : NateDhaliwal</p>
<button onclick="ShowAndHide('0');">Change</button>
<div id="0" style="display:none">
<form method='post' action='/admin/edit/Creator'>
<label for='new-setting'>New Setting:</label>
<input type='text' name='new-setting' required>
<input type='submit' value='Edit'>
</form>
</div>
<hr>
<p>Mods : Edit Topic Title : True</p>
<button onclick="ShowAndHide('1');">Change</button>
<div id="1" style="display:none">
<form method='post' action='/admin/edit/Mods : Edit Topic Title'>
<label for='new-setting'>New Setting:</label>
<input type='text' name='new-setting' required>
<input type='submit' value='Edit'>
</form>
</div>
<hr>
<p>Mods : Delete Reply : True</p>
<button onclick="ShowAndHide('2');">Change</button>
<div id="2" style="display:none">
<form method='post' action='/admin/edit/Mods : Delete Reply'>
<label for='new-setting'>New Setting:</label>
<input type='text' name='new-setting' required>
<input type='submit' value='Edit'>
</form>
</div>
<hr>
<p>Mods : Edit Reply : False</p>
<button onclick="ShowAndHide('3');">Change</button>
<div id="3" style="display:none">
<form method='post' action='/admin/edit/Mods : Edit Reply'>
<label for='new-setting'>New Setting:</label>
<input type='text' name='new-setting' required>
<input type='submit' value='Edit'>
</form>
</div>
<hr>
<p>Mods : Edit Topic Content : False</p>
<button onclick="ShowAndHide('4');">Change</button>
<div id="4" style="display:none">
<form method='post' action='/admin/edit/Mods : Edit Topic Content'>
<label for='new-setting'>New Setting:</label>
<input type='text' name='new-setting' required>
<input type='submit' value='Edit'>
</form>
</div>
<hr>
<p>Mods :</p>
<ul>
<li>NateDhaliwal | Admin</li>
</ul>
<ul>
<li>Anonymous1 | Admin</li>
</ul>
<ul>
<li>Firepup650 | Mod</li>
</ul>
<ul>
<li>CoderElijah | Mod</li>
</ul>
<ul>
<li>QwertyQwerty88 | Mod</li>
</ul>
<ul>
<li>not-ethan | Grim Cyclemaster</li>
</ul>
<ul>
<li>faries-feast</li>
</ul>
<hr>
<p>Admins :</p>
<ul>
<li>NateDhaliwal | Admin</li>
</ul>
<ul>
<li>Anonymous1 | Admin</li>
</ul>
<hr>
<p>Forum Name : NDForum</p>
<button onclick="ShowAndHide('7');">Change</button>
<div id="7" style="display:none">
<form method='post' action='/admin/edit/Forum Name'>
<label for='new-setting'>New Setting:</label>
<input type='text' name='new-setting' required>
<input type='submit' value='Edit'>
</form>
</div>
<hr>
<script>
function ShowAndHide(divId) {
var x = document.getElementById(divId);
if (x.style.display == 'none') {
x.style.display = 'block';
} else {
x.style.display = 'none';
}
}
</script>
</body>
</html>
The error in the initial code was caused by using the same function name ShowAndHide() multiple times. In JavaScript, function names must be unique within the same scope. However, in the original code, the ShowAndHide() function was defined multiple times for each section, leading to a conflict.
To resolve this error, I modified the code to define the ShowAndHide() function only once and ensured that it accepts a parameter (divId) to identify which section to show or hide. This way, each button now calls the ShowAndHide() function with a unique ID corresponding to the <div> it wants to toggle. This change eliminated the conflict and allowed the functionality to work correctly.
I don’t know if this is right, I used gemini and chatgpt.
ai response
1 Like
Ahh, I think I see your issue:
Those are two separate script tags, but keep in mind, they are both global. You are reassigning the value of the same function.
(Edit: @vvithershins got there first lol)
A quick fix is to just make the scripts modules (edit: @vvithershins fix is also good, only defining one function is definitely better):
<script type="module"></script>
Modules have local scope by default so you probably won’t continue to experience issues after that, if you do, just something like the below will fix it:
{
function ShowAndHide() {
var x = document.getElementById('1');
if (x.style.display == 'none') {
x.style.display = 'block';
} else {
x.style.display = 'none';
}
}
}
2 Likes
@vvithershins @MattDESTROYER Will this work?
<script>
function ShowAndHide('{{settings.index(setting)}}') {
var x = document.getElementById('{{settings.index(setting)}}');
if (x.style.display == 'none') {
x.style.display = 'block';
} else {
x.style.display = 'none';
}
}
</script>
The thing is that I may add settings along the way, and so I don’t want to manually hardcode it everytime.
Current page on Inspect
Still doesn’t work?Uncaught ReferenceError: ShowAndHide is not defined at HTMLButtonElement.onclick (admin:57:43)
<body>
<script>
function ShowAndHide('0') {
var x = document.getElementById('0');
if (x.style.display == 'none') {
x.style.display = 'block';
} else {
x.style.display = 'none';
}
}
</script>
<p>Creator : NateDhaliwal</p>
<button onclick="ShowAndHide('0');">Change</button>
<div id="0" style="display:none">
<form method='post' action='/admin/edit/Creator'>
<label for='new-setting'>New Setting:</label>
<input type='text' name='new-setting' required>
<input type='submit' value='Edit'>
</form>
</div>
<hr>
<script>
function ShowAndHide('1') {
var x = document.getElementById('1');
if (x.style.display == 'none') {
x.style.display = 'block';
} else {
x.style.display = 'none';
}
}
</script>
<p>Mods : Edit Topic Title : True</p>
<button onclick="ShowAndHide('1');">Change</button>
<div id="1" style="display:none">
<form method='post' action='/admin/edit/Mods : Edit Topic Title'>
<label for='new-setting'>New Setting:</label>
<input type='text' name='new-setting' required>
<input type='submit' value='Edit'>
</form>
</div>
<hr>
<script>
function ShowAndHide('2') {
var x = document.getElementById('2');
if (x.style.display == 'none') {
x.style.display = 'block';
} else {
x.style.display = 'none';
}
}
</script>
<p>Mods : Delete Reply : True</p>
<button onclick="ShowAndHide('2');">Change</button>
<div id="2" style="display:none">
<form method='post' action='/admin/edit/Mods : Delete Reply'>
<label for='new-setting'>New Setting:</label>
<input type='text' name='new-setting' required>
<input type='submit' value='Edit'>
</form>
</div>
<hr>
<script>
function ShowAndHide('3') {
var x = document.getElementById('3');
if (x.style.display == 'none') {
x.style.display = 'block';
} else {
x.style.display = 'none';
}
}
</script>
<p>Mods : Edit Reply : False</p>
<button onclick="ShowAndHide('3');">Change</button>
<div id="3" style="display:none">
<form method='post' action='/admin/edit/Mods : Edit Reply'>
<label for='new-setting'>New Setting:</label>
<input type='text' name='new-setting' required>
<input type='submit' value='Edit'>
</form>
</div>
<hr>
<script>
function ShowAndHide('4') {
var x = document.getElementById('4');
if (x.style.display == 'none') {
x.style.display = 'block';
} else {
x.style.display = 'none';
}
}
</script>
<p>Mods : Edit Topic Content : False</p>
<button onclick="ShowAndHide('4');">Change</button>
<div id="4" style="display:none">
<form method='post' action='/admin/edit/Mods : Edit Topic Content'>
<label for='new-setting'>New Setting:</label>
<input type='text' name='new-setting' required>
<input type='submit' value='Edit'>
</form>
</div>
<hr>
<p>Mods :</p>
<ul>
<li>NateDhaliwal | Admin</li>
</ul>
<ul>
<li>Anonymous1 | Admin</li>
</ul>
<ul>
<li>Firepup650 | Mod</li>
</ul>
<ul>
<li>CoderElijah | Mod</li>
</ul>
<ul>
<li>QwertyQwerty88 | Mod</li>
</ul>
<ul>
<li>not-ethan | Grim Cyclemaster</li>
</ul>
<ul>
<li>faries-feast</li>
</ul>
<hr>
<p>Admins :</p>
<ul>
<li>NateDhaliwal | Admin</li>
</ul>
<ul>
<li>Anonymous1 | Admin</li>
</ul>
<hr>
<script>
function ShowAndHide('7') {
var x = document.getElementById('7');
if (x.style.display == 'none') {
x.style.display = 'block';
} else {
x.style.display = 'none';
}
}
</script>
<p>Forum Name : NDForum</p>
<button onclick="ShowAndHide('7');">Change</button>
<div id="7" style="display:none">
<form method='post' action='/admin/edit/Forum Name'>
<label for='new-setting'>New Setting:</label>
<input type='text' name='new-setting' required>
<input type='submit' value='Edit'>
</form>
</div>
<hr>
</body>
Replit AI has solved it:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Admin</title>
<link rel="stylesheet" type="text/css" href="/static/style.css">
</head>
<body>
{% for setting in settings %}
{% if setting[1] | string | regex('^\\[.*') %}
<p>{{ setting[0] }} :</p>
{% for username in setting[1] %}
<ul>
<li>{{ username }}</li>
</ul>
{% endfor %}
{% else %}
<script>
function ShowAndHide(settingName) {
var x = document.getElementById('div_' + settingName);
if (x.style.display == 'none') {
x.style.display = 'block';
} else {
x.style.display = 'none';
}
}
</script>
<p>{{ setting[0] }} : {{ setting[1] }}</p>
<button onclick="ShowAndHide('{{ setting[0] }}');">Change</button>
<div id="div_{{ setting[0] }}" style="display:none">
<form method='post' action='/admin/edit/{{ setting[0] | replace(' ', '_') }}'>
<label for='new-setting'>New Setting:</label>
<input type='text' name='new-setting' required>
<input type='submit' value='Edit'>
</form>
</div>
{% endif %}
<hr>
{% endfor %}
</body>
</html>
2 Likes
Somehow you got the < script > and < p >Forum Name : NDForum< /p >switched there at the end which is giving me the Uncaught ReferenceError.
