last day (15 days later) » 

6:18 AM
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
 
6:23 AM
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*
 
6:29 AM
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>')
 
6:32 AM
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..
 
6:39 AM
... 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
 
6:43 AM
it is not great (production code), but should work
 
yet thanks :)
 
6:57 AM
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
 
7:01 AM
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 :)
 
7:03 AM
it should be no problem, because of the new css-class
 
7:15 AM
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) »