Develop Reference

How to write a document.querySelector for the following code

I'm having difficulty writing the document.querySelector for the following code. Currently I've written this code as querySelector but it does not encompass everything...
Please help me improve this, thank you.
Edit: as there seemed to be some confusion, let me elaborate. I would like all the elements, from div, a, img, everything to be encompassed in the querySelector.
var areaa = document.querySelector("#menu #envelope #links");
<div id="menu">Click here to browse the internet.
<div id="envelope">
<div id="links" >
<div>
<a id="g" class="redirect">
<img id="google" src="assets/google.png" />
</a>
</div>
<div style="width: 20%;"></div>
<div>
<a id="s" class="redirect">
<img id="sava" src="assets/Logo_Sava.png"/>
</a>
</div>
</div>
</div>
</div>
Edit 2 - as more code was required (the href elements are removed / added as needed)...
var menu = document.getElementById("menu");
var areaa = document.querySelectorAll(".areaa");
menu.addEventListener("mouseenter", addHref);
//areaa.addEventListener("mouseleave", remHref);
document.addEventListener("mousemove", function(){
if(this != areaa){
remHref();
}
});
menu.addEventListener("click", addHref);
document.addEventListener("click", function (){
if (this != areaa){
remHref();
}
});
var g = document.getElementById("g");
var s = document.getElementById("s");
function remHref (){
if (g.hasAttribute("href")){
g.removeAttribute("href");
}
if (s.hasAttribute("href")){
s.removeAttribute("href");
}
}
function addHref (){
setTimeout(activate, 250);
}
function activate (){
document.getElementById("g").setAttribute("href", "https://www.google.com");
document.getElementById("s").setAttribute("href", "https://www.example.com");
}

you might want to add a class to all elements you want to be captured, then use document.querySelectorAll
var areaa = document.querySelectorAll(".my-class");
html shoud look like this:
<div id="menu" class="my-class">Click here to browse the internet.
<div id="envelope" class="my-class">
<div id="links" class="my-class">
<div>
<a id="g" class="redirect">
<img class="my-class" id="google" src="assets/google.png" />
</a>
</div>
<div style="width: 20%;"></div>
<div>
<a id="s" class="redirect">
<img id="sava" src="assets/Logo_Sava.png"/>
</a>
</div>
</div>
</div>

If you want to select everything you can use the below:
var areaa = document.querySelectorAll("#menu #envelope #links *");
If you want to be more specific you can do the following (the code below will select all of the anchor tags and images inside #links):
var areaa = document.querySelectorAll("#menu #envelope #links a, #menu #envelope #links img");

You can use querySelectorAll
The Document method querySelectorAll() returns a static (not live) NodeList representing a list of the document's elements that match the specified group of selectors.
Learn more: https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll
You can use it like this:
var areaa = document.querySelectorAll('*');
This will return all items.
You can replace document with the container if you want to restrict this to a specific div.

2 things, either add a class to every div
<div id="menu" class="area">Click here to browse the internet.
<div id="envelope" class="area">
<div id="links" class="area" >
<div>
<a id="g" class="redirect">
<img id="google" src="assets/google.png" />
</a>
</div>
<div style="width: 20%;"></div>
<div>
<a id="s" class="redirect">
<img id="sava" src="assets/Logo_Sava.png"/>
</a>
</div>
</div>
</div>
</div>
and select all divs by
let areaa = getElementsByClassName("area");
or you can use document.querySelectorAll("yourclassname") to access all divs of that class name

button click events not firing in deeply nested divs

I'm trying to create 3 simple buttons w/ a shared text area. Each button will display a different message in the shared text area when clicked. I have managed to accomplish this in a codepen here. However, when I tried to implement this into my project, it behaved much differently. The buttons no longer swapped text depending on which button was pressed, and the individual indexes are no longer being correctly tracked. My guess is that its because they're deeply nested within other divs? Not sure. Basically, when you click on one of the image icons, the corresponding text above would show. Thanks so much in advance for any help. Here is my code
$('.benefit-button').first().addClass('active');
$('.benefit-button').on('click', function(){
var $this = $(this);
$siblings = $this.parent().children(),
position = $siblings.index($this);
console.log (position);
$('#blah div').removeClass('active').eq(position).addClass('active');
$siblings.removeClass('active');
$this.addClass('active');
})
div[class*="content-"] {
display: none;
}
div.active {
display: block;
}
<div class="row lt-blue-bg">
<div class="large-12 large-centered columns benefit-section">
<span class="small-11 small-centered large-7 columns info" id="benefit">
<div class="accordionWrapper">
<div id="blah">
<div class="content-1"><h2>Happy</h2></div>
<div class="content-2"><h2>Healthy</h2></div>
<div class="content-3"><h2>Money</h2></div>
</div>
<div class="accordionItem close">
<p class="accordionItemHeading">Sources<br>+</p>
<div class="accordionItemContent">
<p style="color: black;">Yes, the Tobacco Quitline is completely FREE!</p>
</div>
</div>
</div>
</span>
<span class="small-12 large-3 columns benefit-icons">
<span>
<a class="benefit-button"><img src="<?php echo get_template_directory_uri(); ?>/images/rainbowicon.png" class="circle rainbow"></a>
</span>
<span>
<a class="benefit-button"><img src="<?php echo get_template_directory_uri(); ?>/images/hearticon.png" class="circle heart"></a>
</span>
<span>
<a class="benefit-button"><img src="<?php echo get_template_directory_uri(); ?>/images/moneyicon.png" class="circle money"></a>
</span>
</span>
</div>
</div>

It's the extra <span> around the <a> that doesn't correspondend with
$siblings = $this.parent().children(),
there's also a syntax error in that line: , instead of ;.
You need
$siblings = $this.parent().parent().children();
to get from a (=this) to parent (span) to parent (span above).

jQuery: Update content on a summary DIV based on clicks from other DIV elements

I'm trying to learn JS and jQuery and I'm using a project to do this. I've been scratching my head for the last 4 hours trying to figure out how to do something and I'm completely stuck.
Basically I want to update a div's content based on clicks from other div's using HTML data- attributes on the ".blue". I have price and description fields. I have managed to collect the data from the first div no matter where I click but then can't get this updated correctly based on the DIV I click in.
I've tried multiple combinations of $(this) keyword to try and make this work but couldn't figure it out. I've searched these forums and found somewhat a solution but couldn't get it, I think my mind is just too overwhelmed with this.
Here's the one I looked at: Update content in div, on click of another div
I'm sure this must be super simple but I can't get my head around it today.
Here's my code:
var upload = $('.blue').data('target1');
var download = $('.blue').data('target2');
var price = $(this).data('price');
$(document).ready(function() {
$('.blue').on('click', function() {
$(upload).removeClass('hide');
$(download).removeClass('hide');
});
$('#price').text(price);
});
div {
margin:0;
padding:0;
}
.blue {
background-color: #ddddEE;
border: 1px solid black;
}
.blue:hover {
cursor: pointer;
background-color: #aaaaEE;
}
.red {
background-color: #EEdddd;
border: 1px solid black;
}
.bold {
font-weight: 600;
text-align: center;
}
.hide {
display:none;
}
#price {
font-size: 22px;
color: blue;
font-weight: 400;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-xs-3">
<div class="col-xs-12 blue" data-target1="#target1" data-target2="#target2">
<span>$</span><span data-price="300" id="1">300</span><br>
<p id="desc1" class="hide">Description 1</p>
<span>text here</span><br>
<span>text here</span><br>
<span>text here</span>
</div>
</div>
<div class="col-xs-3">
<div class="col-xs-12 blue" data-target1="#target3" data-target2="#target4">
<span>$</span><span data-price="600" id="2">600</span><br>
<p id="desc2" class="hide">Description 2</p>
<span>text here</span><br>
<span>text here</span><br>
<span>text here</span>
</div>
</div><div class="col-xs-3">
<div class="col-xs-12 blue" data-target1="#target5" data-target2="#target6">
<span>$</span><span class="prices" data-price="1200" id="3">1200</span><br>
<p id="desc3" class="hide">Description 3</p>
<span>text here</span><br>
<span>text here</span><br>
<span>text here</span>
</div>
</div>
<div class="col-xs-3">
<div class="col-xs-12 red">
<span class="bold">Summary</span><br>
<div id="target1" class="hide"><span>TARGET 1</span></div>
<div id="target2" class="hide"><span>TARGET 2</span></div>.
<div id="target3" class="hide"><span>TARGET 3</span></div>
<div id="target4" class="hide"><span>TARGET 4</span></div>
<div id="target5" class="hide"><span>TARGET 5</span></div>
<div id="target6" class="hide"><span>TARGET 6</span></div>
<span id="price" class=""></span>
</div>
</div>
Here is my fiddle: https://jsfiddle.net/rodcunha/qav9sn6n/42/
Thank you in advance for any help for this newbie.

To understand the cause of your problem, and how to solve it, you have to be careful in the present case of when the various instructions you've written are evaluated, and also how some of the jQuery instructions you use work.
First thing to note: the first three lines of your Javascript code are evaluated just after they have been read. So after they are evaluated, the state of your variables is as follows :
upload = '#target1'
download = '#target2'
price = undefined
Since these are the values used in the rest of the code, in all cases, you can see why it always shows what you expect for the first <div> only. To understand why, let's analyze the first line :
var upload =
$('.blue') [1]
.data('target1') [2]
[1] returns the jQuery collection containing the DOM <div> elements that have the blue class. So far, so good?
[2] returns the value associated with the data-target1 attribute of the first element of the jQuery collection (see documentation for the .data method)
What you probably want is for upload, download and price to contain the values of the data-* attributes corresponding to the <div> the user clicks on. You cannot know in advance which element the user will click on, so it does not make sense to read the values before the user clicks on anything. So you should read the values when the event is processed.
According to jQuery's documentation for the event handlers, this is the element the event is currently associated with. So your <div> element.
Now that you know that, you probably realized what you should do to correct your code. By moving your existing code around and making the smallest changes possible, you end up with the following working code.
$(document).ready(function() {
$('.blue').on('click', function() {
var upload = $(this).data('target1');
$(upload).removeClass('hide');
var download = $(this).data('target2');
$(download).removeClass('hide');
var price = $(this).find('[data-price]').data('price');
$('#price').text(price);
});
});

I'm not sure is this the behaviour you want, can you check it?
https://jsfiddle.net/rodcunha/qav9sn6n/42/
$(document).ready(function() {
$('.blue').click(function() {
var x = $(this).attr('data-target1');
$(x).removeClass('hide');
});
$('#price').text(price);
});
if You want to add or remove class hide clicking again on the div you can change the removeClass to toggleClass.

Replace you code by:
$(document).ready(function() {
$('.blue').on('click', function(e) {
$($(e.currentTarget).data('target1')).removeClass('hide');
$($(e.currentTarget).data('target2')).removeClass('hide');
$('#price').text($(e.target).parent().find('.price').data('price'));
});
});

Add a price class for every span data-price.
<span>$</span><span class="price" data-price="300" id="1">300</span><br>
HTML:
<div class="col-xs-3">
<div class="col-xs-12 blue" data-target1="#target1" data-target2="#target2">
<span>$</span><span class="price" data-price="300" id="1">300</span><br>
<p id="desc1" class="hide">Description 1</p>
<span>text here</span><br>
</div>
</div>
<div class="col-xs-3">
<div class="col-xs-12 blue" data-target1="#target3" data-target2="#target4">
<span>$</span><span class="price" data-price="600" id="2">600</span><br>
<p id="desc2" class="hide">Description 2</p>
<span>text here</span><br>
</div>
</div>
<div class="col-xs-3">
<div class="col-xs-12 blue" data-target1="#target5" data-target2="#target6">
<span>$</span><span class="prices price" data-price="1200" id="3">1200</span><br>
<p id="desc3" class="hide">Description 3</p>
<span>text here</span><br>
</div>
</div>
<div class="col-xs-3">
<div class="col-xs-12 red">
<span class="bold">Summary</span><br>
<!-- add 'summary' class for all div -->
<div id="target1" class="hide summary"><span>TARGET 1</span></div>
<div id="target2" class="hide summary"><span>TARGET 2</span></div>
<div id="target3" class="hide summary"><span>TARGET 3</span></div>
<div id="target4" class="hide summary"><span>TARGET 4</span></div>
<div id="target5" class="hide summary"><span>TARGET 5</span></div>
<div id="target6" class="hide summary"><span>TARGET 6</span></div>
<span id="price" class=""></span>
</div>
</div>
To get the current clicked div use currentTarget instead of target because currentTarget always return .blue contains div as event listner is set on '.blue' but target results can be different depending on your click position into .blue class div.
jQuery:
$(document).ready(function() {
$('.blue').on('click', function(e) {
var upload = $(e.currentTarget).data('target1');
var download = $(e.currentTarget).data('target2');
var price = $(e.target).parent().find('.price').data('price');
// add a new class 'summary' for all 'summary id div'.
// loop over all '.summary' class and add 'hide' class
$('.summary').each(function(index, item) {
// console.log(item);
$(item).removeClass('hide').addClass('hide');
});
$(upload).removeClass('hide');
$(download).removeClass('hide');
$('#price').text(price);
});
});
jsfiddle link: https://jsfiddle.net/sajibcse68/qav9sn6n/49/

How to copy the href link of an anchor to other anchor?

I am showing a set of products via shortcode in WordPress. The display has an image and button.
Problem: Only the photo contains the link to single product page. The associated button does not have the link to the single product page.
This is the current code:
<div class="display-products">
<div class="wpb_wrapper">
<div class="displayProduct-shortcode displayProduct-Container">
<div class="product_grid dp-section dp-group woocommerce" id="displayProduct">
<div class="dp_product_item dp-col dp-col_1_of_6 firstcol">
<div class="dp_images">
<a class="dp-product-image" title="Custom Made Wedding Cabinet" href="yahoo.com">
<div class="he-wrap tpl1">
<div class="dp-img-wrapper"> <img width="192" height="264" alt="#" class="attachment-display_product_thumbnail size-display_product_thumbnail wp-post-image" src="img_src"> </div>
</div> <span data-id="696" class="dpquickview dp_quickview_button"><img src="img_src"></span> </a>
</div>
<div class="dp-product-information clearfix">
<h2 class="product-name">
<a title="Custom Made Wedding Cabinet" href="#">Custom Made Wedding Cabinet</a>
</h2>
<div class="dp-stock"></div>
<div class="dp-grid-button"> <a class="single_add_to_cart_button button alt db_customButton" href="#">READ MORE</a> </div>
<div style="clear: both;"></div>
</div>
</div>
</div>
</div>
</div>
</div>
Desired Output: I want to somehow iterate over each .single_add_to_cart_button and copy the link of every product-name to each READ MORE button
This is my current jquery code:
j('.display-products .displayProduct-shortcode .dp-product-information .dp-grid-button .single_add_to_cart_button').each(function() {
var getProductLink = j('.display-products .displayProduct-shortcode .dp-product-information .product-name > a').attr('href');
j(this).attr('href', getProductLink);
});

Set the href attribute value using the elements context. Use closest() to traverse up to dp-product-information element then find the desired anchor element the read its attribute and set the value.
Use
j('.display-products .displayProduct-shortcode .dp-product-information .dp-grid-button .single_add_to_cart_button').attr('href', function(){
return j(this).closest('.dp-product-information').find('.product-name>a').attr('href');
});
$(function() {
$('.dp-product-information .dp-grid-button .single_add_to_cart_button').attr('href', function() {
return $(this).closest('.dp-product-information').find('.product-name > a').attr('href');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dp-product-information clearfix">
<h2 class="product-name">
<a title="Custom Made Wedding Cabinet" href="#Test">Custom Made Wedding Cabinet</a>
</h2>
<div class="dp-stock"></div>
<div class="dp-grid-button">
<a class="single_add_to_cart_button button alt db_customButton" href="#">READ MORE</a>
</div>
<div style="clear: both;"></div>
</div>

Instead of assigning value for the different buttons with the links I would like to suggest you to use a common class (if you can) then trigger the click event for them:
$('.selector').on('click',function(){
$('.a-selector').trigger('click');
});

jquery: how to append DOM element to selector within variable containing other DOM elements

When storing DOM elements in a javascript variable prior to appending them to the actual DOM is there a way with jQuery to select elements inside the variable?
For example,
I have a list of tweets on my page. Every time I click a refresh button I append a new tweet to the list below.
I add the new tweet like follows:
new tweet
<li class="tweet normal-tweet" data-user-name="Dorothy">
<div class="image">
<img height="48" width="48" src="http://twitter.com/api/users/profile_image?screen_name=Dorothy" alt="" />
</div>
<div class="content">
<div class="user">
<a class="user-name" href="http://twitter.com/Dorothy" title="Dorothy">Dorothy</a>
<div class="full-name"></div>
</div>
<div class="text">Once in a lullaby</div>
<div class="time-stamp" data-time="1322631934000">1322631934000</div>
</div>
</li>
Inside each tweet on the page, not the new tweet yet, I use jQuery to append some elements.
I have:
var actionsMarkup =
"<div class='actions'>
<span class='favorite'>Favorite</span>
<span class='retweet'>Retweet</span>
<span class='reply'>Reply</span>
</div>";
and I append it to the element with the .content class
$(actionsMarkup).appendTo('#tweets .tweet .content');
Now, when I make a new tweet I do the following:
$(document).on('click', '.refresh', function() {
newTweet = $(<new tweet code from above>);
actionsMark = $(actionsMarkup);
$(newTweet.appendTo('#tweets');
I need to be able to append the actionsMark contents to the div with class .content. However, I can't just reapply my prior statement of
$(actionsMarkup).appendTo('#tweets .tweet .content');
because that puts the markup on all .content divs again, even if it is already there.
Is there a way for me to use selectors to access the DOM nodes in my newTweet variable before I append it to the document object?
I am thinking something like
$(actionsMarkup).appendTo( newTweet, '.content');
If there is no way with selectors to do this then what are some other quick ways?
List of Tweets and Tweet container
<ul id="tweets" class="normal-tweet show-promoted-tweets">
<li class="tweet promoted-tweet" data-user-name="Dorothy">
<div class="image">
<img height="48" width="48" src="http://twitter.com/api/users/profile_image?screen_name=Dorothy" alt="" />
</div>
<div class="content">
<div class="user">
<a class="user-name" href="http://twitter.com/Dorothy" title="Dorothy">Dorothy</a>
<div class="full-name">Dorothy</div>
</div>
<div class="text">Somewhere over the rainbow</div>
<div class="time-stamp" data-time="1322631934000">3 minutes ago</div>
</div>
</li>
<li class="tweet promoted-tweet" data-user-name="lion">
<div class="image">
<img height="48" width="48" src="http://twitter.com/api/users/profile_image?screen_name=lion" alt="" />
</div>
<div class="content">
<div class="user">
<a class="user-name" href="http://twitter.com/lion" title="lion">lion</a>
<div class="full-name">Lion</div>
</div>
<div class="text">Way up high,</div>
<div class="time-stamp" data-time="1322631934000">17 minutes ago</div>
</div>
</li>
<li class="tweet normal-tweet" data-user-name="scarecrow">
<div class="image">
<img height="48" width="48" src="http://twitter.com/api/users/profile_image?screen_name=scarecrow" alt="" />
</div>
<div class="content">
<div class="user">
<a class="user-name" href="http://twitter.com/scarecrow" title="scarecrow">scarecrow</a>
<div class="full-name">Scarecrow</div>
</div>
<div class="text">And the dreams that you dreamed of,</div>
<div class="time-stamp" data-time="1322631934000">32 minutes ago</div>
</div>
</li>
</ul>

You can use .last(), to select the last element after you append your new tweet, like below:
$(document).on('click', '.refresh', function() {
newTweet = $(<new tweet code from above>);
$(newTweet).appendTo('#tweets');
var actionsMarkup =
"<div class='actions'>
<span class='favorite'>Favorite</span>
<span class='retweet'>Retweet</span>
<span class='reply'>Reply</span>
</div>";
$("#tweets .tweet").last().find(".content").append(actionsMarkup);
});
if you insist to use appendTo(), you can try using :last-child:
$(actionsMarkup).appendTo('#tweets .tweet:last-child .content');

I was looking to see if you can do the same thing, found this question but the existing answer is not useful in my case as i would like to alter the element before adding.
You can create a new dom element in a variable with jQuery and do operations on it as if it is already in the dom before appending it.
Example:
var newTweet = $('<div></div>');
newTweet.addClass('tweet');
newTweet.append('<span class="username"></span>');
newTweet.find('span.username').html('John Doe');
$('body').append(newTweet);
the following will be appended to the body:
<div class="tweet"><span class="username">John Doe</span></div>
Very handy if you are building a reusable interface element (like a dialogue box) with multiple options.