last day (15 days later) » 

06:18
Hello
great there is a chat room here as well :D
i think i have the solution
yes it pops up after some comments :D
for(i=0;i<5;i++){
var parent = i==0?'testd':'testd' + (i-1);
document.getElementById(parent).innerHTML+=`<button class="dropdown-btn" ><i class="fa fa-sticky-note left-icon"></i>P${i}
<i class="fa fa-caret-down"></i>
</button> <div class="dropdown-container" id="testd${i}" >
<a onclick="generateqrrr();" style="color:white;">Generate QRcode</a>
<a onclick="studentlistrr();" style="color:white;">Student list</a>
<a onclick="manualattendancerr();" style="color:white;">Manual Attendance</a>
</div>
nn
let me explain the scenario
1s
06:23
okay
how to send SS here omg
just past it in the chat
paste
cant CTRL C ctrl V ss here
anyways
in real scenraio
I have sidenav as
-> COurse (if click)
-->>SUbjects (from a loop)
One level or multiple?
---> static dropdown list on each subject such as the one with id "testdd"
yes
i have code for 1 iteratio without using JS but i need it with JS so i can generate it auto with dynamic amount of subjects
iteration*
multiple level*
06:29
so the loop that you posted are the subjects? right?
+
yes
document.getElementById('testd').innerHTML+=`<button class="dropdown-btn" ><i class="fa fa-sticky-note left-icon"></i>P${i}
the "testd" u see in the above code generating those subjects
which styling are you using? currently I only see button :D only that i can have a beter picture
while the "testdd" which come later is not really used anywhere
i can give u whole HTML page here i guess
I possible taht would help alot
<html>

<head>
<!--JQuery-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"
integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
and JS below
function testing(){


for(i=0;i<2;i++){
document.getElementById('testd').innerHTML+=`<button class="dropdown-btn" ><i class="fa fa-sticky-note left-icon"></i>P${i}
<i class="fa fa-caret-down"></i>
</button> <div class="dropdown-container" id="testdd-${i}" >
<a onclick="generateqrrr();" style="color:white;">Generate QRcode</a>
<a onclick="studentlistrr();" style="color:white;">Student list</a>
<a onclick="manualattendancerr();" style="color:white;">Manual Attendance</a>
</div>
`
console.log(i +'<br>')
06:32
perfect will read it quick
BTW thanks allot for giving time <3
okay now i understand, .... just a moment
no problem, it is fun :D
ahaha
above image will show ideal case but that is only HTML and not JS and it is hard coded and not auto generate according to number of incoming subjects
every thing is correct the only problem is...
drive.google.com/open?id=1XCywIeqTFOn45tE3seHM_km82_8cKgzy This one is which I am getting currently and when i click P0 nothing happens even tho code is being generated in outerHTMl..
06:39
... the new buttons don't have an event for clicking
because you attacht the events on load
and the new buttons come later :D
SO i should generate static code seperately in a different function..
I am not too used to JS and HTML stuff yet . just a beginner. I know little bit stuff of Node.js but not JS on HTML that much XD.
No Problem, I will rewirte your test function, so that it works
06:43
it is not great (production code), but should work
yet thanks :)
06:57
It took a bit longer, ... had a bug :D
function testing(){
console.info("test")
var newHTML = "";
for(i=0;i<5;i++){
newHTML +=`<button class="dropdown-btn new-buttons">
<i class="fa fa-sticky-note left-icon"></i>P${i}<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-container" >
<a onclick="generateqrrr();" style="color:white;">Generate QRcode</a>
<a onclick="studentlistrr();" style="color:white;">Student list</a>
<a onclick="manualattendancerr();" style="color:white;">Manual Attendance</a>
</div>
`
}
document.getElementById('testd').innerHTML += newHTML;
its fine :D
Part one is your loop, i just added a new class new-buttons
i will check it and try to understand fast
and part two starting with
_var newButtons = ..._
okay, can also explain
ah :D
it works fine
1s let me go through code
fast
var newButtons = document.querySelectorAll(".dropdown-btn.new-buttons");
var i;
console.info(newButtons)
for (i = 0; i < newButtons.length; i++) {
newButtons[i].addEventListener("click", function () {
console.info("123")
this.classList.toggle("active");
var dropdownContent = this.nextElementSibling;
if (dropdownContent.style.display === "block") {
dropdownContent.style.display = "none";
} else {
dropdownContent.style.display = "block";
}
});
}
this part confuses me but i will try to understand on my own
cant take anymroe of ur time :D already u helped me big time :D
Thanks allot <3
07:01
Okay this code is from your HTML,
It is for binding the Button Click event, but only for the new buttons
so if i have it in my htm would it bother it ?
i mean duplication stuff
we created in the loop, I will post the code with some comments in to your quest7answer
OK thanks :)
07:03
it should be no problem, because of the new css-class
07:15
Once Again Big Thanks :)
and i went through the code again and understand it a bit more now :) thanks allot
No Problem, all the best learning Javascript. have a nice day/night/... :D

last day (15 days later) »