Develop Reference

Click and Download not working on all elements in NodeList

I'm trying to scrape some files off of a website which has files organized like this:
<div id="CourseContent">
<div class="tab-content coursecontentnotes" id="content_210485ac8-16e8-11ed-9075-0a45a3083c9c">
<!-- Text Content -->
<!-- End Text Content -->
<!-- Video Content -->
<!-- Video Content End -->
<!-- File Content Start -->
<div class="content-type-area">
<div class="row">
<div class="col-md-12">
<div href="javascript:void(0)" class="link-preview" onclick="downloadcoursedoc('4d2d6bd0-077a-4bda-80be-cf7483c9f606')">
<span class="pesu-icon-unlink" aria-hidden="true"></span>
Web Form 2.0 & Form Controls
<span class="pesu-icon-arr-right pull-right" aria-hidden="true"></span>
</div>
</div>
</div>
</div>
<!-- File Content End -->
<!-- Web Link Content End -->
<!-- Web Link Content End -->
<!-- Text Content -->
<!-- End Text Content -->
<!-- Video Content -->
<!-- Video Content End -->
<!-- File Content Start -->
<div class="content-type-area">
<div class="row">
<div class="col-md-12">
<div href="javascript:void(0)" class="link-preview" onclick="downloadcoursedoc('a7bdfc1e-d7cd-40ac-9b02-a688fc684e6e')">
<span class="pesu-icon-unlink" aria-hidden="true"></span>
HTML5 (New Tags, Inputs, Elements and Controls),
<span class="pesu-icon-arr-right pull-right" aria-hidden="true"></span>
</div>
</div>
</div>
</div>
<!-- File Content End -->
<!-- Web Link Content End -->
<!-- Web Link Content End -->
<!-- END of for loop -->
<!-- For Study Material -->
<!-- End of Study Material -->
<!-- For Forums -->
<!-- For Forums End -->
</div>
The code I used in puppeteer's page.evaluate function is as follows:
let downloadObj = document.querySelectorAll(
"#CourseContent .tab-content .content-type-area div"
);
// filter selected elements belonging to same content row
downloadObj = Array.from(downloadObj).filter((el) =>
el.querySelector(".col-md-12")
);
downloadObj.forEach((ele) => {
eval(ele.querySelector(".link-preview").getAttribute("onclick"));
});
The problem is, only only the second file is getting downloaded.
But if I manually do
eval(downloadObj[0].querySelector(".link-preview").getAttribute("onclick"));
the file downloads normally.
Does this have to do something with the click opening a new tab?
Thank you for your time.

Try this instead - it gives each click a second
const elements = [...document.querySelectorAll("#CourseContent .tab-content .content-type-area div .col-md-12")]
.map(ele => ele.querySelector(".link-preview");
const length = elements.length;
let cnt = 0;
let tId;
const clickIt = () => {
if (cnt >= length) return; // stop
elements[cnt].click();
cnt++
setTimeout(clickIt,1000);
});
clickIt();

Add and remove class on multiple element when clicked

I have the below as an example of what I'm working on; I'm trying to add a class to two elements when one of the elements is clicked.
<div id="main">
<div id="section1">
- contents here -
</div>
<div id="section2">
- contents here -
</div>
<div id="section3">
- contents here -
</div>
<div class="plans-group">
<div class="plans-columns plans-type-1">
<div class="plans-col plans-left plans-heading">Heading</div>
<div class="plans-col plans-right">
<div class="select-plan select-gold">Gold</div>
</div>
<!-- end plans-right -->
</div>
<!-- end plans-columns -->
<div class="plans-columns plans-type-2">
<div class="plans-col plans-left plans-heading">Heading</div>
<div class="plans-col plans-right">
<div class="select-plan select-silver">Silver</div>
</div>
<!-- end plans-right -->
</div>
<!-- end plans-columns -->
<div class="plans-columns plans-type-3">
<div class="plans-col plans-left plans-heading">Heading</div>
<div class="plans-col plans-right">
<div class="select-plan select-bronze">Bronze</div>
</div>
<!-- end plans-right -->
</div>
<!-- end plans-columns -->
</div>
<!-- end plans-group -->
</div>
<!-- end main -->
#1): DIV with class "select-plan"
When div with class "select-plan" is clicked, add class "clicked" to that div. When it's clicked again, remove the added class.
#2): DIV with id "main"
When "select-plan" is clicked (as explained above) also add class to the container div with id "main". And remove the added class when "select-plan" is clicked again.
This is where I have a problem because different classes have to be added to "main". For example:
When "select-gold" is clicked, add class "gold-selected" to "main"
When "select-silver" is clicked, add class "silver-selected" to "main"
When "select-bronze" is clicked, add class "bronze-selected" to "main"
I don't want previously clicked div to have its added class removed because another div is clicked. The added class should only be removed when that same div is clicked for the second time and so on...
Also, I might have up to 8 or more plans. The solution should not be limited to the 3 plans (Gold, Silver, and Bronze). I should have the ability to create more plans.
I really appreciate everyone's help with this.
Thanks in advance.

let selectPlan = document.querySelectorAll('.select-plan');
let mainDiv = document.getElementById('main');
selectPlan.forEach(el =>{
el.addEventListener('click',function(e){
if(e.target.classList.contains('select-plan')){
e.target.classList.toggle('clicked');
}
if(e.target.classList.contains('select-gold')){
mainDiv.classList.add('gold-selected');
mainDiv.classList.remove('silver-selected');
mainDiv.classList.remove('bronze-selected');
}else if(e.target.classList.contains('select-silver')){
mainDiv.classList.add('silver-selected');
mainDiv.classList.remove('gold-selected');
mainDiv.classList.remove('bronze-selected');
}else{
mainDiv.classList.add('bronze-selected');
mainDiv.classList.remove('silver-selected');
mainDiv.classList.remove('gold-selected');
}
});
});

let main = document.getElementById("main");
let select = document.querySelector(".select-plan");
let selectG = document.getElementsByName("gold");
let selectS = document.getElementsByName("silver");
let selectB = document.getElementsByName("bronze");
function toggleGold() {
if (main.classList.contains('gold-select')) {
main.classList.remove('gold-select');
} else {
main.classList.add('gold-select');
}
selectG[0].classList.toggle('cliqué')
}
//You can add same function for silver and bronze
document.querySelector(".select-gold").addEventListener("click", toggleGold);
document.querySelector(".select-silver").addEventListener("click", toggleSilver);
document.querySelector(".select-bronze").addEventListener("click", toggleBronze)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div name="gold" class="select-plan select-gold">Gold</div>
<div name="silver" class="select-plan select-silver">Silver</div>
<div name="bronze" class="select-plan select-bronze">Bronze</div>

Toggle only this item

i've a problem to toggle only (this) 1 'card'
$('a[rel="toggle_comments"]').click(function(){
var div = $('.comments');
$(div, this).slideToggle('slow');
});
<!-- This is a example code -->
<section>
<div class="mainclass">
[...]
<div class="select">
Test
</div>
</div>
<ul class="comments">
<!-- Content -->
</ul>
</section>
<section>
<div class="mainclass">
[...]
<div class="select">
Test
</div>
</div>
<ul class="comments">
<!-- Content -->
</ul>
</section>
[...]
When I clicked at 'toggle_comments', toggle all '.comments' classes, not only that, I have clicked. Anyone have any ideas?
Sorry for my bad english.
I hope you understand what I mean - Thanks :-)

If you want to toggle only the .comments under the <section> tag your link is in, do this:
$('a[rel="toggle_comments"]').click(function(){
// find the closest section tag (parent) and find all child `.comments`
var $comments = $(this).closest('section').find('.comments');
$comments.slideToggle('slow');
});
If you want to toggle all .comments:
$('a[rel="toggle_comments"]').click(function(){
$('.comments').slideToggle('slow');
});

JS, Highlight content between comments

I have few comments in my code, like this:
<!-- DebugDataTemplateBegin {"template":"one"} -->
<div class="row notices" id="admin">
comment One content
</div>
<!-- DebugDataTemplateEnd {"template":"one"} -->
<!-- DebugDataTemplateBegin {"template":"two"} -->
<div class="row notices" id="admin">
comment Two content
</div>
<!-- DebugDataTemplateEnd {"template":"two"} -->
and I have anchors like this:
one <br/>
two
These links content corresponds to the comments 'template' element, what I want to achieve is that when the user hover over any of these links it's correspondence content (between the comment) will be highlighted.
I started a simple jsfiddle example http://jsfiddle.net/Banzay/md79aaby/ , but not sure if this is even possible.
Sorry if I didn't explain this very well.
Youssef

Cleaned up my answer above and removed it.
You might have to change the parent you are looking for comments in. And the regex could use some love but this is the general idea.
HTML:
<!-- DebugDataTemplateBegin {"template":"one"} -->
<div class="row notices" id="admin">comment One content</div>
<!-- DebugDataTemplateEnd {"template":"one"} -->
<!-- DebugDataTemplateBegin {"template":"two"} -->
<div class="row notices" id="admin">comment Two content</div>
<!-- DebugDataTemplateEnd {"template":"two"} -->
one
<br/>
two
JS:
var getComment = function (templateName) {
return $("body").contents().filter(function () {
return this.nodeType == 8 && this.nodeValue.match(RegExp('DebugDataTemplateBegin.*'+templateName));
})
}
$('a').hover(function () {
var templateName = this.href.split('#')[1];
var comment = getComment(templateName);
var element = $(comment).next();
element.toggleClass('highlight');
})
http://jsfiddle.net/md79aaby/18/

Click not working in any condition

I have just a simple hyperlink on which when I am trying to add an click() event handler it is not working. I tried, .on(), .live(), .delegate() none of them worked. How can I do it?
I cannot make a fiddle becuase I don't know why my bootstrap.min.css is not getting included in the external resources section.
Please tell me any other way of doing it.
My Code:
HTML:
<div class="navbar nav-fixed-top navbar-inverse" style="min-height: 50px; margin-bottom: 0; box-shadow: 0px 2px 5px #222;">
<!-- Creating a fixed to the top navbar with no bottom margin and a nice little shadow and increasing the height -->
<div class="navbar-inner" style="border-radius: 0;min-height: 50px; ">
<!-- Creating the inner content of navbar and increasng it's height aswell to match the parent's height aswell -->
<div class="container-fluid">
<!-- Main header starts -->
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<!-- Small screen collapseable menu starts --> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span>
<!-- The collapseable menu icon(becuase the three `icon-bar` make an icon :P) -->
</button> <a class="brand" href="#"><img src="img/logo.png"
style="height: 25px;" /> </a>
<!-- adding the logo to the header -->
<div class="nav-collapse collapse pull-right">
<!-- div holding collapseable menu's data -->
<ul class="nav">
<!-- creating a list to be created in the collapseable menu -->
<li>Register
</li>
<!-- adding an hyper link to the collapseable menu -->
</ul>
<!-- closing the list -->
</div>
<!-- closing the div holding collapseable menu's data -->
</div>
<!-- closing the main header -->
</div>
<!-- closing inner content holder of navbar div -->
</div>
<!-- closing the fixed to top navbar holder -->
CSS: Using bootstrap.min.css
JS:
var registerBtn = $("#register_button"); //storing the hyperlink of register in a variable
var i = 0; //click count
$(registerBtn).on('click', function (e) {
i++;
if (i % 2 === 0) {
$("#register_frm").fadeToggle('fast', function () {
$("#login_frm").fadeToggle('fast');
});
$("#register").text('Register');
} else {
$("#login_frm").fadeToggle('fast', function () {
$("#register_frm").fadeToggle('fast');
});
$("#register").text('Login');
}
});
Any suggesstions?

Change your code :
$(function() {
var registerBtn = $("#register_button"); //storing the hyperlink of reg....
var i = 0; //click count
registerBtn.on('click', function (e) { // since registerBtn is a reference to anchor tag
e.prevenDefault(); // prevent default behaviour of anchor tag
.........
});
});

It's probably executing the handler binding before the element is created in the DOM. Either move the code to the end of the document (after the element has been created), or wrap it inside a ready event:
$(function() {
var registerBtn = $("#register_button"); //storing the hyperlink of register in a variable
var i = 0; //click count
$(registerBtn).on('click', function (e) {
i++;
if (i % 2 === 0) {
$("#register_frm").fadeToggle('fast', function () {
$("#login_frm").fadeToggle('fast');
});
$("#register").text('Register');
} else {
$("#login_frm").fadeToggle('fast', function () {
$("#register_frm").fadeToggle('fast');
});
$("#register").text('Login');
}
});
});