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 can I get some element width inside setInterval correctly without delaying?

I'm trying to increase some progress bar using setInterval. When I test, it's working fine.
var progressBar = $('.progress-bar');
var count = 0;
var interval = setInterval(function () {
var width = progressBar.width();
console.log(width++);
progressBar.width(width);
count++;
if (count === 101) {
clearInterval(interval);
}
}, 50);
.progress-bar {
width: 0px;
height: 4px;
background-color: #00f;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div class="progress-bar"></div>
Since I nest it into dropdown, I'm getting trouble with the time to repeat every action:
var increase = function (progressBar, ms) {
var count = 0;
var interval = setInterval(function () {
var width = progressBar.width();
console.log(width++);
progressBar.width(width);
count++;
if (count === 21) {
clearInterval(interval);
}
}, ms);
}
$('.dropdown').on('shown.bs.dropdown', function () {
var progressBar = $(this).find('.progress-bar');
increase(progressBar, +progressBar.data('ms'));
});
.progress-bar {
width: 0px;
height: 4px;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<div class="dropdown d-inline-block">
<button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Progress bar with 100ms
</button>
<div class="dropdown-menu" >
<a class="dropdown-item" href="#">
<div class="progress-bar" data-ms="100"></div>
</a>
</div>
</div>
<div class="dropdown d-inline-block">
<button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Progress bar with 300ms
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">
<div class="progress-bar" data-ms="300"></div>
</a>
</div>
</div>
When I open the dropdown, the progress bar width will be increased. But there is something wrong when I try different values to repeat the action.
In the example, if I set the value to 100 or lower, I'll get the progress bar width wrongly. The default width value is 0, after increasing (by adding 1), why it's 0.15625 and then 0.3125...?
Another try, if I set the value to 300 or higher, I get the width correctly (0, 1, 2...)
Anyone knows why?

Use css width property instead od jQuery width() method since width() may return unreliable data.
var increase = function (progressBar, ms) {
var count = 0;
var interval = setInterval(function () {
var width = parseInt(progressBar[0].style.width) || 0;
console.log(width++);
progressBar[0].style.width = `${width}px`;
count++;
if (count === 21) {
clearInterval(interval);
}
}, ms);
}
$('.dropdown').on('shown.bs.dropdown', function () {
var progressBar = $(this).find('.progress-bar');
increase(progressBar, +progressBar.data('ms'));
});
.progress-bar {
width: 0px;
height: 4px;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<div class="dropdown d-inline-block">
<button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Progress bar with 100ms
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">
<div class="progress-bar" data-ms="100"></div>
</a>
</div>
</div>
<div class="dropdown d-inline-block">
<button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Progress bar with 300ms
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">
<div class="progress-bar" data-ms="300"></div>
</a>
</div>
</div>
Taken from docs:
Note that .width() will always return the content width, regardless of the value of the CSS box-sizing property. As of jQuery 1.8, this may require retrieving the CSS width plus box-sizing property and then subtracting any potential border and padding on each element when the element has box-sizing: border-box. To avoid this penalty, use .css( "width" ) rather than .width().

How to know how many class elements have been selected on click?

I'm working on wishlist, i have heart icon on each item, Now i want to display total number of item added in wishlist. What is proper way to do this?
$(function() {
$('body').on('click', '.fav-icon', function() {
var icon = $(this);
var icon_fa_icon = icon.attr('data-prefix');
if (icon_fa_icon === "far") {
icon.attr('data-prefix', 'fas');
$('.search-list-box .fav-icon').each(function() {
var fasLength = $(this).attr('data-prefix', 'fas');
var wishlistDiv = +$(fasLength).length;
$('.wishlist_count sup').text(wishlistDiv);
});
} else {
icon.attr('data-prefix', 'far');
}
});
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<script defer src="https://use.fontawesome.com/releases/v5.6.3/js/all.js" integrity="sha384-EIHISlAOj4zgYieurP0SdoiBYfGJKkgWedPHH4jCzpCXLmzVsw1ouK59MuUtP4a1" crossorigin="anonymous"></script>
<div>
<span class="wishlist_count">
<i class="far text-orange fa-heart"></i>
<sup>0</sup>
</span>
</div>
<hr>
<div class="search-list-box">
<i class="fav-icon far fa-heart text-orange"></i>
</div>
<div class="search-list-box">
<i class="fav-icon far fa-heart text-orange"></i>
</div>
<div class="search-list-box">
<i class="fav-icon far fa-heart text-orange"></i>
</div>
<div class="search-list-box">
<i class="fav-icon far fa-heart text-orange"></i>
</div>

Part of your problem is with these lines:
var fasLength = $(this).attr('data-prefix', 'fas');
var wishlistDiv = +$(fasLength).length;
That first line is setting the data-prefix attribute to fas on all elements so they are all chosen on first click. As it's selecting all elements the count is wrong. To fix this you need to use an attribute selector:
var fasLength = $('[data-prefix="fas"]').length;
Finally you also need to amend the count of selected items when something is deselected, so the count logic should be run outside of the if condition. The calculation also does not need the each()loop.
The complete logic will then look like this:
$(function() {
$('body').on('click', '.fav-icon', function() {
var $icon = $(this).attr('data-prefix', function(i, v) {
return v == 'far' ? 'fas' : 'far';
});
var fasLength = $('[data-prefix="fas"]').length;
$('.wishlist_count sup').text(fasLength);
});
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<script defer src="https://use.fontawesome.com/releases/v5.6.3/js/all.js" integrity="sha384-EIHISlAOj4zgYieurP0SdoiBYfGJKkgWedPHH4jCzpCXLmzVsw1ouK59MuUtP4a1" crossorigin="anonymous"></script>
<div>
<span class="wishlist_count">
<i class="far text-orange fa-heart"></i>
<sup>0</sup>
</span>
</div>
<hr>
<div class="search-list-box">
<i class="fav-icon far fa-heart text-orange"></i>
</div>
<div class="search-list-box">
<i class="fav-icon far fa-heart text-orange"></i>
</div>
<div class="search-list-box">
<i class="fav-icon far fa-heart text-orange"></i>
</div>
<div class="search-list-box">
<i class="fav-icon far fa-heart text-orange"></i>
</div>

Get Bootstrap's current theme colors in Javascript

My objective is to create charts using chart.js using colors that match the current chosen Bootstrap 4 theme (there are multiple available for the site)
My current strategy is to have a badge of every color on the page:
<div id="color-example-badge-primary" class="badge badge-primary" ></div >
<div id="color-example-badge-warning" class="badge badge-warning" ></div >
<div id="color-example-badge-danger" class="badge badge-danger" ></div >
<div id="color-example-badge-secondary" class="badge badge-secondary" ></div >
<div id="color-example-badge-light" class="badge badge-light" ></div >
<div id="color-example-badge-success" class="badge badge-success" ></div >
<div id="color-example-badge-info" class="badge badge-info" ></div >
<div id="color-example-badge-dark" class="badge badge-dark" ></div >
and then use jQuery to pull the background colors into an array:
var themeColors = [$("#color-example-badge-primary").css('backgroundColor'),
$("#color-example-badge-warning").css('backgroundColor'),
$("#color-example-badge-danger").css('backgroundColor'),
$("#color-example-badge-secondary").css('backgroundColor'),
$("#color-example-badge-light").css('backgroundColor'),
$("#color-example-badge-success").css('backgroundColor'),
$("#color-example-badge-info").css('backgroundColor'),
$("#color-example-badge-dark").css('backgroundColor')
];
I can then give this array to chart.js to create a chart with the theme colors.
Is there a better way to get the current theme colors from the CSS using Javascript? Or is there no way without creating a DOM element and testing it's background color?
If there is an easy way to get CSS rules using Javascript without dealing with a DOM element, that'd be great.

Bootstrap stores its themed colors also inside CSS variables on the :root element.
A more appropriate way would be to extract these colors using getComputedStyle() and getPropertyValue('--variable')
const style = getComputedStyle(document.body);
const theme = {
primary: style.getPropertyValue('--primary'),
secondary: style.getPropertyValue('--secondary'),
success: style.getPropertyValue('--success'),
info: style.getPropertyValue('--info'),
warning: style.getPropertyValue('--warning'),
danger: style.getPropertyValue('--danger'),
light: style.getPropertyValue('--light'),
dark: style.getPropertyValue('--dark'),
};
console.log(theme);
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<div class="container"></div>
Now you can get these use these colors with JavaScript or jQuery as follow
element.style.backgroundColor = theme.primary; // Javascript
$(element).css('background-color', theme.primary); // jQuery
For bootstrap 5
Bootstrap 5 renamed it properties, to use above code with Bootstrap 5 see example below
const style = getComputedStyle(document.body);
const theme = {
primary: style.getPropertyValue('--bs-primary'),
secondary: style.getPropertyValue('--bs-secondary'),
success: style.getPropertyValue('--bs-success'),
info: style.getPropertyValue('--bs-info'),
warning: style.getPropertyValue('--bs-warning'),
danger: style.getPropertyValue('--bs-danger'),
light: style.getPropertyValue('--bs-light'),
dark: style.getPropertyValue('--bs-dark'),
};
console.log(theme);
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<div class="container"></div>

Use document.body.getElementsByTagName("*") to get all DOM in body and loop it to get what you want
$(document).ready(function(){
var items = document.body.getElementsByTagName("*");
var arr=[];
for (var i = 4, len = items.length; i < len; i++) {
arr.push(document.getElementById(items[i].id)!=null?$('#'+items[i].id).css('backgroundColor'):"");
}
console.log(arr)
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<div id="color-example-badge-primary" class="badge badge-primary" >a</div >
<div id="color-example-badge-warning" class="badge badge-warning" >a</div >
<div id="color-example-badge-danger" class="badge badge-danger" >a</div >
<div id="color-example-badge-secondary" class="badge badge-secondary" >a</div >
<div id="color-example-badge-light" class="badge badge-light" >a</div >
<div id="color-example-badge-success" class="badge badge-success" >a</div >
<div id="color-example-badge-info" class="badge badge-info" >a</div >
<div id="color-example-badge-dark" class="badge badge-dark" >a</div >

Error running script on existing element

I'm having issues running a script and getting and error on the addEventListener property. I understand that this occurs when I reference an element that doesn't exist in the DOM, but I'm running the script at the bottom of my markup, so I'm not sure what I need to change.
Script:
var slideLeft = new Menu({
wrapper: '#o-wrapper',
type: 'slide-left',
menuOpenerClass: '.c-button',
maskId: '#c-mask'
});
var slideLeftBtn = document.querySelector('#c-button--slide-left');
slideLeftBtn.addEventListener('click', function(e) {
e.preventDefault;
slideLeft.open();
});
Example: http://codepen.io/ourcore/pen/ZBLeVQ
Working demo: http://callmenick.com/_development/slide-push-menus/

I updated the CodePen: http://codepen.io/HenryGranados/pen/rWjmVj
Here's a working solution. Hope it helps :)
var slideLeft = new Menu({
wrapper: '#o-wrapper',
type: 'slide-left',
menuOpenerClass: '.c-button',
maskId: '#c-mask'
});
var slideLeftBtn = document.querySelector('#c-button--slide-left');
slideLeftBtn.addEventListener('click', function(e) {
e.preventDefault;
slideLeft.open();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://callmenick.com/_development/slide-push-menus/css/style.min.css">
<link rel="stylesheet" type="text/css" href="http://callmenick.com/_development/slide-push-menus/css/font-awesome.min.css">
<script type="text/javascript" src = "http://callmenick.com/_development/slide-push-menus/js/dist/menu.js"></script>
<main class="o-content">
<div class="o-container">
<div class="c-buttons">
<button id="c-button--slide-left" class="c-button">Slide Left</button>
</div>
</div>
</main>
<div id="o-wrapper" class="o-wrapper">
</div>
<nav id="c-menu--slide-left" class="c-menu c-menu--slide-left">
<button class="c-menu__close">← Close Menu</button>
<ul class="c-menu__items">
<li class="c-menu__item">Home</li>
<li class="c-menu__item">About</li>
<li class="c-menu__item">Services</li>
<li class="c-menu__item">Work</li>
<li class="c-menu__item">Contact</li>
</ul>
</nav>
<div id="c-mask" class="c-mask"></div>