We Keep Coding

Dropdown not working the second time when clicked using dom

I have made a navigation tab with buttons, and a side-button which displays a list of files when I click the nav button.
Visual representation:
check1 check2 check3
dropdown (assuming check1 is clicked)
1.txt
2.txt
All the information comes up properly when I click on these checks in the console. but when I click on the button second time, it doesn't display any dropdown even though it shows correct information in console.
Code for function to create dropdown:
function add_pvt_dropdown(files) {
const dropdown_div = document.getElementById("pvt_list_dropdown");
//console.log(dropdown_div.childNodes[2])
console.log("these are the child nodes \n:", dropdown_div.childNodes, "and this is the lenght", dropdown_div.childNodes.length)
if (dropdown_div.childNodes[2])
dropdown_div.removeChild(dropdown_div.childNodes[2])
console.log(dropdown_div)
const UL = document.createElement("ul");
//files = localStorage.getItem('all_file_in_dir').split(',')
if (typeof (files) === undefined && files == null) {
alert("choose something")
} else {
UL.setAttribute("class", "dropdown-menu");
UL.setAttribute("id", "pvt_option");
UL.setAttribute("aria-labelledby", "dropdownMenuButton");
files.forEach(val => {
if (val.includes('CSV_')) {
var li = document.createElement('li');
var a = document.createElement('a');
a.setAttribute('class', "dropdown-item")
a.setAttribute('id', val)
li.appendChild(a);
UL.appendChild(li)
t = document.createTextNode(val);
a.innerHTML = a.innerHTML + val;
console.log(a.innerHTML)
}
});
dropdown_div.appendChild(UL)
}
}
HTML code
<div id="pvt_list_dropdown" class="dropdown" data-toggle="dropdown" data-bs-toggle="dropdown" data-bs-toggle="dropdown" >
<button class="btn btn-secondary dropdown-toggle btn-sm" type="button" id="dropdownMenuButtonPvt" data-toggle="dropdown" data-bs-toggle="dropdown" aria-expanded="false">
List
</button>
</div>
Functionality: when I click on the navigation buttons, it takes all the files from a particular directory and shows as dropdown. As mentioned, it works just once, but when I click any other button or the same button twice, nothing is shows up in the dropdown.
Further information: I checked that it may be an arrangement issue with js and bootstrap but even correcting that doesn't help:
<script src="https://unpkg.com/#popperjs/core#2"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
how information is shown for that element:
<div id="pvt_list_dropdown" class="dropdown">
<button class="btn btn-secondary dropdown-toggle btn-sm" type="button" id="dropdownMenuButtonPvt" data-bs-toggle="dropdown" aria-expanded="false">List</button>
<ul class="dropdown-menu" id="pvt_option" aria-labelledby="dropdownMenuButton">
<li>
<a class="dropdown-item" id="f1.csv">f1.csv
</a>
</li>
<li>
<a class="dropdown-item" id="f2.csv">f2.csv
</a>
</li>
</ul>
</div>
Edit:
information on how events are triggered:
the menu bar is called when DOM is loaded:
document.addEventListener("DOMContentLoaded", menu_tags)
menu_tags is a function that will dynamically create the menu using create an element
function menu_tags() {
var check = ["check1",
"check2"
]
sub_checks = [
"sub_checks1"
]
var toadd = document.createDocumentFragment();
var i;
for (let i = 0; i < check.length; i++) {
var newLi = document.createElement('a');
newLi.href = "#" + check[i];
newLi.innerHTML = check[i];
newLi.id = check[i];
newLi.className = "tablinks"
newLi.onclick = function() {open(event, check[i])};
// if(lib_verify_check[i] == "lib-checker"){
// }
toadd.appendChild(newLi);
}
document.getElementById("myTopnav").appendChild(toadd)
}
The open function will fetch the information for files for selected check
function open(event, checkname){
var i, tabcontent, tablinks;
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace("active", "");
}
event.currentTarget.className += " active";
console.log(event.currentTarget.id)
localStorage.setItem('selected_check', event.currentTarget.id)
// Exists.
if(event.currentTarget.id){
get_files()
console.log("changed")
}
//localStorage.getItem('get_files')
}
in the get_files() function, all the file information will be stored and that information will be displayed in dropdown.
Please find the fiddle link below:
Note that get_files wont work in fiddle, this is for checking the functionality:
fiddle_link

How to make loop out of these?

How to make loop out of following HTML?
HTML
<div class="dropdown-content" ng-repeat="cat in categoryList | orderBy: 'id'">
<a ng-click="getProductsByCategory(1)" ng-model="category.id">Cakes</a>
<a ng-click="getProductsByCategory(2)" ng-model="category.id">Pies</a>
<a ng-click="getProductsByCategory(3)" ng-model="category.id">Donuts</a>
<a ng-click="getProductsByCategory(4)" ng-model="category.id">Strudels and kishi</a>
<a ng-click="getProductsByCategory(5)" ng-model="category.id">Macaroons</a>
<a ng-click="getProductsByCategory(6)" ng-model="category.id">Cheesecakes</a>
<a ng-click="getProductsByCategory(7)" ng-model="category.id">Ice cream</a>
<a ng-click="getProductsByCategory(8)" ng-model="category.id">Assorti</a>
<a ng-click="getProductsByCategory(9)" ng-model="category.id">Low-calorie</a>
<a ng-click="getProductsByCategory(10)" ng-model="category.id">Guacamole</a>
<a ng-click="getProductsByCategory(11)" ng-model="category.id">Сroissants</a>
<a ng-click="getProductsByCategory(12)" ng-model="category.id">Sorbet</a>
<a ng-click="getProductsByCategory(13)" ng-model="category.id">Tiramisu</a>
<a ng-click="getProductsByCategory(14)" ng-model="category.id">Cookies</a>
<a ng-click="getProductsByCategory(15)" ng-model="category.id">Fruit and Puree</a>
</div>
What I tried
I tried JavaScript but I had problem with quotation marks:
let i; for (i=1; i<=16; i++) { document.writeln("<a ng-click="getProductsByCategory('+i+')">category.name</a>"); }

I'm not sure if I understood the point correctly. But if you want to generate the list automatically using JS you can use this loop:
var arr = ['Cakes', 'Pies', 'Donuts', 'Strudels and kishi', 'Macaroons', 'Cheesecakes', 'Ice cream', 'Assorti', 'Low-calorie', 'Guacamole', 'Сroissants', 'Sorbet', 'Tiramisu', 'Cookies', 'Fruit and Puree'];
var res = '';
for (var i = 0; i < arr.length; i++) {
res += '<a ng-click="getProductsByCategory(' + (i + 1) + ')" ng-model="category.id">' + arr[i] + '</a> <br>';
}
var wrap = document.getElementsByClassName('dropdown-content')[0];
wrap.innerHTML = res;
<div class="dropdown-content" ng-repeat="cat in categoryList | orderBy: 'id'"></div>

Limiting the number times while loop loop

<div class="teachers1">
<div class="teamySlides">
<div class="yourteachers">
<?php
while ($row = mysqli_fetch_array($query)) {
echo '<a class="teachers" href="teacherinfo.php?id=' . $row['IDNum'] . '">
<img src="pictures/blank photo.png" class="teacherpic"><br>
<span>'.$row['LastName'].'</span><br>
<span>'.$row['Grade'].' - </span>
<span>'.$row['Section'].'</span>
</a>';
}
?>
</div>
</div>
<a class="prev" onclick="tplusSlides(-1)">❮</a>
<a class="next" onclick="tplusSlides(1)">❯</a>
<div class="dot-container">
<span class="tdot" onclick="tcurrentSlide(1)"></span>
<span class="tdot" onclick="tcurrentSlide(2)"></span>
</div>
</div>
The code above is used to generate objects based on how many the data is on the database. To better understand it here is a picture of the system:
The problem is when the data exceed 8, the objects do not go to the next page. The reason is that I dont know how to do that.
For example I clicked the right arrow ">" the code must go to the second page and so on with the rest of the object.
Can anyone help me or can anyone provide me with the syntax? Thanks.
Javascript:
var ti;
var tslides = document.getElementsByClassName("yourteachers");
var tdots = document.getElementsByClassName("tdot");
if (n > tslides.length)
tslideIndex = 1
if (n < 1)
tslideIndex = tslides.length
for (ti = 0; ti < tslides.length; ti++)
tslides[ti].style.display = "none";
for (ti = 0; ti < tdots.length; ti++)
tdots[ti].className = tdots[ti].className.replace(" active", "");
tslides[tslideIndex-1].style.display = "block";
tdots[tslideIndex-1].className += " active";

How can I make my Slideshow Indicators change their style with my current code?

I have had an issue with placing slideshows in my website. I require more than one slideshow on the same page which has led to multiple problems with the scrolling and such. I finally came across a solution which works almost perfectly however, the indicators do not change color to reflect the current slide.
var w3 = {};
w3.slideshow = function (sel, ms, func) {
var i, ss, x = w3.getElements(sel), l = x.length;
ss = {};
ss.current = 1;
ss.x = x;
ss.ondisplaychange = func;
if (!isNaN(ms) || ms == 0) {
ss.milliseconds = ms;
} else {
ss.milliseconds = 1000;
}
ss.start = function() {
ss.display(ss.current)
if (ss.ondisplaychange) {ss.ondisplaychange();}
if (ss.milliseconds > 0) {
window.clearTimeout(ss.timeout);
ss.timeout = window.setTimeout(ss.next, ss.milliseconds);
}
};
ss.next = function() {
ss.current += 1;
if (ss.current > ss.x.length) {ss.current = 1;}
ss.start();
};
ss.previous = function() {
ss.current -= 1;
if (ss.current < 1) {ss.current = ss.x.length;}
ss.start();
};
ss.display = function (n) {
w3.styleElements(ss.x, "display", "none");
w3.styleElement(ss.x[n - 1], "display", "block");
}
ss.start();
return ss;
};
<html>
<script src="w3.js"></script>
<body>
<div id="2" class="w3-row-padding w3-light-grey w3-padding-64 w3-container">
<div class="w3-content">
<div class="w3-content w3-display-container w3-center">
<div class = "Slide2 w3-animate-opacity">
<h1> Slide Content </h1>
</div>
<!-- Second slide App Development -->
<div class = "Slide2 w3-animate-opacity">
<h1> Slide Content </h1>
</div>
<!-- Third slide App Development -->
<div class = "Slide2 w3-animate-opacity">
<h1> Slide Content </h1>
</div>
<!-- Fourth slide App Development -->
<div class = "Slide2 w3-animate-opacity">
<h1> Slide Content </h1>
</div>
<div class="w3-center w3-container w3-section w3-large w3-text-grey" style="width:100%">
<span class="w3-left w3-hover-text-blue fa fa-arrow-left" onclick="myShow2 .previous()"></span>
<span class="w3-right w3-hover-text-blue fa fa-arrow-right" onclick="myShow2 .next()"></span>
<span class="fa fa-circle demo w3-hover-text-blue w3-transparent" onclick="myShow2 .display(1)"></span>
<span class="fa fa-circle demo w3-hover-text-blue w3-transparent" onclick="myShow2 .display(2)"></span>
<span class="fa fa-circle demo w3-hover-text-blue w3-transparent" onclick="myShow2 .display(3)"></span>
<span class="fa fa-circle demo w3-hover-text-blue w3-transparent" onclick="myShow2 .display(4)"></span>
</div>
</div>
</div>
<script> myShow2 = w3.slideshow(".Slide2", 0); </script>
</div>
</body>
</html>
So the code works well and does what I want except I'm not sure how to make the circle indicators change to blue to reflect the current slide. I have tried completely different approaches except this is the only one that allows multiple slideshows on the same page. Could some please explain to me how I would go about making the circles stay blue when clicked and revert when another is clicked?

I have found a solution to my problem. First I added an extra variable to call a function <script> myShow4 = w3.slideshow(".Slide4", 0, "demo4"); </script>
the "demo4" will be used to find the indicator dots. <span class="fa fa-circle demo4 w3-hover-text-blue w3-transparent" onclick="myShow4 .display(4)"></span>each indicator has the specific class.
`ss.display = function (n) {
ss.current = n;
w3.styleElements(ss.x, "display", "none");
w3.styleElement(ss.x[n - 1], "display", "block");
ss.indicator(demo);
}
ss.indicator = function(n) {
var dots = document.getElementsByClassName(n);
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" w3-text-blue", "");
}
x[ss.current-1].style.display = "block";
dots[ss.current-1].className += " w3-text-blue";
}`
This is the new code in the JS file. on click the display function is called and I edited the function to also call the indicator function which changes the current slide relevant dot to blue while changing the rest to nothing or how they were before. This solution worked for me, adding another function within the called function.

How to hide/show div based on variable using javascript

I am trying to display a div based on the URL parameter. I have to use only html css and javascript. I got it working until the part where the div must be set to display none if the variable (parameter from URL) matches.
HTML
<div id="cfiblinks">
<div class="row">
<div class="twelve columns">
<ul class="nav-bar">
<li>
<a href="#" target="_blank">
<span>Order Document Upload</span>
</a>
</li>
<li>
<a href="#" target="_blank">
<span>Business Card History</span>
</a>
</li>
<li>
<a href="#" target="_blank">
<span>Material Inventory</span>
</a>
</li>
</ul>
</div>
</div>
</div>
Javascript
<script language="JavaScript">
function getURLParameter(name) {
return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.search)||[""])[1].replace(/\+/g, '%20'))||null
}
myvar = getURLParameter('UserGroupId');
document.write('The url parameter is: ' + myvar +' ');
if (myvar == 10102) {
document.write('The url parameter is: ' + myvar +' ');
document.getElementById('cfiblinks').style.visibility = 'visible';
} else {
document.write('The url parameter is not : ' + myvar +' ');
document.getElementById('cfiblinks').style.visibility = 'hidden';
}
</script>
Any help would be greatly appreciated. I suspect something is wrong with the document.getElementById.

You can set the display property using block or none.
document.getElementById('cfiblinks').style.display = 'block'; //Will show
document.getElementById('cfiblinks').style.display = 'none'; //Will hide

Try this..
if (myvar == 10102) {
document.write('The url parameter is: ' + myvar +' ');
document.getElementById('cfiblinks').setAttribute("style", "display:block");
} else {
document.write('The url parameter is not : ' + myvar +' ');
document.getElementById('cfiblinks').setAttribute("style", "display:none");
}

Try:
document.getElementById('something').style.display = "block";
and
document.getElementById('something').style.display = "none";