We Keep Coding

how do i use querySelector the right way [duplicate]

This question already has answers here:
What do querySelectorAll and getElementsBy* methods return?
(12 answers)
Closed 1 year ago.
I want the navbar <ul> to disappear when I click it. With querySelectorAll() I selected all <li>s in the navbar. Then I added a click event listener to it. So when I click it, it should toggle the class of the navbar <ul> to "active" and then disappear.
It works with the toggle button but not with the <li>s.
<i id="togglebtn" class="fas fa-bars"></i>
<nav class="navbar">
<div class="brand-title">brandName</div>
<div class="navbar-links">
<ul id="ul">
<li class="jsscrolltrigger">Start</li>
<li class="jsscrolltrigger">Galerie</li>
<li class="jsscrolltrigger">Anfahrt</li>
<li class="jsscrolltrigger"><a href="#Speisekarte">Speisekarte</>
</li>
</ul>
</div>
</nav>
<script type="text/javascript">
var togglebtn = document.getElementById("togglebtn");
togglebtn.addEventListener("click", function () {
ul.classList.toggle("active");
});
// this following part doesnt work //
// i want the ul(navbar) to disappear when i click it //
var a = document.querySelectorAll(".jsscrolltrigger");
var ul = document.getElementById("ul");
a.addEventListener("click", function () {
ul.classList.toggle("active");
});
</script>

querySelectorAll returns a NodeList. You have to iterate the list and add the event listener to every node.
For example:
var togglebtn = document.getElementById("togglebtn");
togglebtn.addEventListener("click", function() {
ul.classList.toggle("active");
});
var nodeList = document.querySelectorAll(".jsscrolltrigger");
var ul = document.getElementById("ul");
nodeList.forEach(node => {
node.addEventListener("click", function() {
ul.classList.toggle("active");
});
})
<i id="togglebtn" class="fas fa-bars"></i>
<nav class="navbar">
<div class="brand-title">brandName</div>
<div class="navbar-links">
<ul id="ul">
<li class="jsscrolltrigger">Start</li>
<li class="jsscrolltrigger">Galerie</li>
<li class="jsscrolltrigger">Anfahrt</li>
<li class="jsscrolltrigger">Speisekarte</li>
</ul>
</div>
</nav>

When you use Document.querySelectorAll() It doesn't return a single element. It return a NodeList on which you can call forEach to loop through all of the item.
let a = document.querySelectorAll('.jsscrolltrigger');
let ul = document.getElementById("ul");
a.forEach(function(element) {
element.addEventListener('click', function(e){
e.preventDefault();
ul.classList.toggle("active");
});
});
.active {
border: 2px solid red;
}
<nav class="navbar">
<div class="brand-title">brandName</div>
<div class="navbar-links">
<ul id="ul">
<li class="jsscrolltrigger">Start</li>
<li class="jsscrolltrigger">Galerie</li>
<li class="jsscrolltrigger">Anfahrt</li>
<li class="jsscrolltrigger"><a href="#Speisekarte">Speisekarte</>
</li>
</ul>
</div>
</nav>
If you don't want to use forEach to perform the loop you can force the NodeList to be consider as an Array by passing it to the Array.from() method which allows you to perform any array operation on selected elements
Array.from(a).map(function(){ /*...*/ });
Array.from(a).filter(function(){ /*...*/ });

Bind jQuery custom accordion to url hash tag

I have jQuery custom accordion function and I would like to bind it to url that every hash tag given in url would open desired element.
I added var hash in function and tried to assign it to active variable but it did not work. Any ideas how to modify it?
jQuery.fn.extend({
accordion: function() {
return this.each(function() {
var $ul = jQuery(this);
if($ul.data('accordiated'))
return false;
jQuery.each($ul.find('ul, li>div'), function(){
jQuery(this).data('accordiated', true);
jQuery(this).hide();
});
jQuery.each($ul.find('a'), function(){
jQuery(this).click(function(e){
activate(this);
return void(0);
});
});
var hash = window.location.hash;
var active = jQuery('.accordion .active');
if(active){
activate(active, 'toggle');
jQuery(active).parents().show();
}
function activate(el,effect){
Query(el).parent('li').toggleClass('active').siblings().removeClass('active').children('ul, div').slideUp('fast');
jQuery(el).siblings('ul, div')[(effect || 'slideToggle')]((!effect)?'fast':null);
}
});
}
});
jQuery('.accordion ul').accordion();
A here is html structure:
<div class="accordion">
<ul class="accordion">
<li class="active">
Health<span></span>
<ul>
<li>Implants<span></span>
<p>Content</p>
</li>
<li>Protetic<span></span>
<p>Content</p>
</li>
</ul>
</li>
<li>Link 2<span></span>
<p>Content</p>
</li>
</ul>
</div>

How to get the element on which taphold is fired?

Can you please help me to locate on which element "taphold" is fired by using JS, jQuery, or jQuery Mobile?
My HTML structure is like the below
<script>
$(document).on("pagecreate", function () {
$("#myFilesListView").bind('contextmenu', function (event) {
event.preventDefault();
event.stopPropagation();
return false;
});
});
$(document).ready(function () {
$("#myFilesListView").bind("taphold", function (event) {
event.preventDefault(false);
event.stopPropagation();
var ID = $(this).child().attr("id");
alert(ID);
});
});
</script>
<div data-role="page" id="page1">
<div data-role="header"></div>
<div data-role="main">
<ul data-role="listview" id="mylistview">
<li class="mydata" id="1"> some conetent</li>
<li class="mydata" id="2"> some conetent</li>
<li class="mydata" id="3"> some conetent</li>
<li class="mydata" id="4"> some conetent</li>
<li class="mydata" id="5"> some conetent</li>
<!--ids are not in predefined sequences and there may be 100s of list-->
</ul>
</div>
<div data-role="fotter"></div>
</div>
In my JavaScript code I am able to prevent the default behavior of taphold, but I am not getting how to get the Id of a particular list as soon as a user tap and hold on that list.

You can bind the taphold to the li elements instead of the listview:
$(document).on("pagecreate", "#page1", function () {
$("#mylistview").on('contextmenu', function (event) {
event.preventDefault();
event.stopPropagation();
return false;
});
$("#mylistview li").on("taphold", function (event) {
var ID = $(this).prop("id");
alert(ID);
});
});
DEMO

how to pass this element to javascript onclick function and add a class to that clicked element

I had an html navigation code as below
function Data(string) {
//1. get some data from server according to month year etc.,
//2. unactive all the remaining li's and make the current clicked element active by adding "active" class to the element
$('.filter').removeClass('active');
$(this).addClass('active');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row" style="padding-left:21px;">
<ul class="nav nav-tabs" style="padding-left:40px;">
<li class="active filter">This Month</li>
<li class="filter">Year</li>
<li class="filter">60 Days</li>
<li class="filter">90 Days</li>
</ul>
</div>
When the user clicks on any of the tabs
all the remaining tabs should be unactive,
and the current element/tab should be active,
My code above is not working.
How to make the above code work?
I only want to use javascript onclick for this. Is there any way that the this(current) object is send when the user clicks on the tab?

Use this html to get the clicked element:
<div class="row" style="padding-left:21px;">
<ul class="nav nav-tabs" style="padding-left:40px;">
<li class="active filter">This Month</li>
<li class="filter">Year</li>
<li class="filter">60 Days</li>
<li class="filter">90 Days</li>
</ul>
</div>
Script:
function Data(string, el)
{
$('.filter').removeClass('active');
$(el).parent().addClass('active');
}

Try like
<script>
function Data(string)
{
$('.filter').removeClass('active');
$(this).parent('.filter').addClass('active') ;
}
</script>
For the class selector you need to use . before the classname.And you need to add the class for the parent. Bec you are clicking on anchor tag not the filter.

<div class="row" style="padding-left:21px;">
<ul class="nav nav-tabs" style="padding-left:40px;">
<li class="active filter">This Month</li>
<li class="filter">Year</li>
<li class="filter">60 Days</li>
<li class="filter">90 Days</li>
</ul>
</div>
<script>
function Data(element)
{
element.removeClass('active');
element.addClass('active') ;
}
</script>

You have two issues in your code.. First you need reference to capture the element on click. Try adding another parameter to your function to reference this. Also active class is for li element initially while you are tryin to add it to "a" element in the function.
try this..
<div class="row" style="padding-left:21px;">
<ul class="nav nav-tabs" style="padding-left:40px;">
<li class="active filter">This Month</li>
<li class="filter">Year</li>
<li class="filter">60 Days</li>
<li class="filter">90 Days</li>
</ul>
</div>
<script>
function Data(string,element)
{
//1. get some data from server according to month year etc.,
//2. unactive all the remaining li's and make the current clicked element active by adding "active" class to the element
$('.filter').removeClass('active');
$(element).parent().addClass('active') ;
}
</script>

You can use addEventListener to pass this to a JavaScript function.
HTML
<button id="button">Year</button>
JavaScript
(function () {
var btn = document.getElementById('button');
btn.addEventListener('click', function () {
Date('#year');
}, false);
})();
function Data(string)
{
$('.filter').removeClass('active');
$(this).parent().addClass('active') ;
}

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.js"></script>
<script type="text/javascript" src="jquery-2.1.0.js"></script>
<script type="text/javascript" >
function openOnImageClick(event)
{
//alert("Jai Sh Raam");
// document.getElementById("images").src = "fruits.jpg";
var target = event.target || event.srcElement; // IE
console.log(target);
console.log(target.src);
var img = document.createElement('img');
img.setAttribute('src', target.src);
img.setAttribute('width', '200');
img.setAttribute('height', '150');
document.getElementById("images").appendChild(img);
}
</script>
</head>
<body>
<h1>Screen Shot View</h1>
<p>Click the Tiger to display the Image</p>
<div id="images" >
</div>
<img src="tiger.jpg" width="100" height="50" alt="unfinished bingo card" onclick="openOnImageClick(event)" />
<img src="sabaLogo1.jpg" width="100" height="50" alt="unfinished bingo card" onclick="openOnImageClick(event)" />
</body>
</html>

javascript doesn't produce new class name on html object

I use this javascript to produce "toggle" an extra word on class name by expanding DropDown function functionality and drop it when clicked:
function DropDown(el) {
this.dd = el;
this.initEvents();
}
DropDown.prototype = {
initEvents: function () {
var obj = this;
obj.dd.on('click', function (event) {
$(this).toggleClass('active');
/* event.stopPropagation();*/
return false;
});
}
}
$(function () {
var dd = new DropDown($('#dd'));
$(document).click(function () {
// all dropdowns
$('.wrapper-dropdown').removeClass('active');
});
});
HTML in which I want JavaScript to make effect looks like,
(I'm targeting class="wrapper-dropdown") :
<div class="wrapper">
<div id='dd' class="wrapper-dropdown">1'st subject
<ul class="dropdown">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
<div id='dd' class="wrapper-dropdown">2'nd subject
<ul class="dropdown">
<li>1</li>
<li>2</li>
</ul>
</div>
<div id='dd' class="wrapper-dropdown">3'rd subject
<ul class="dropdown"></ul>
</div>
<div id='dd' class="wrapper-dropdown">4'th subject
<ul class="dropdown">
<li>1</li>
<li>2</li>
</ul>
</div>
</div>
The problem is that JavaScript makes effect only on the first item in wrapper div

Because you have multiple divs with id='dd' - ID's need to be unique.
Just add a dd class to your div like so:
<div class="wrapper-dropdown dd">1'st subject
<ul class="dropdown">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
And change the el: var dd = new DropDown($('.dd'));