We Keep Coding

Adding join() to a map() function

I'm mapping over an array to display data in the browser using template literals.
With each rendered object, a comma shows up in the browser and also when I inspected the element. I did some reading and I think it is because I haven't joined the array, which I am trying to do but I am not understanding where to add it in the basic function I have.
Here is the code:
let synopsisRender = synopsisContent.map((item)=>{
return`
<div class="synopsis" key=${item.id}>
<div class="synopsisHeader">
<div class="cover">
<img src="${item.poster}" alt="${item.altText}">
</div>
<div class="synopsisTitle">
<h1>${item.title}</h1>
</div>
</div>
<div class="synopsisText">
<h2>${item.subTitle}</h2>
<p>${item.synopsisText}</p>
</div>
</div>
`
});
document.getElementById("synopsis").innerHTML = synopsisRender;

After mapping, but before assigning to innerHTML.
let synopsisRender = synopsisContent.map((item)=>{
return`
<div class="synopsis" key=${item.id}>
<div class="synopsisHeader">
<div class="cover">
<img src="${item.poster}" alt="${item.altText}">
</div>
<div class="synopsisTitle">
<h1>${item.title}</h1>
</div>
</div>
<div class="synopsisText">
<h2>${item.subTitle}</h2>
<p>${item.synopsisText}</p>
</div>
</div>
`
}).join(''); //Here...
document.getElementById("synopsis").innerHTML = synopsisRender; //...Or here, `synopsisRender.join('')`

Faster way to target same selector in a jQuery loop

I have an output page (that I can't control) that has a really bad format. I'm using jQuery to loop through the elements and reorganize them to meet design specs.
I'm compiling strings using code similar to that below, but I'm wondering if there's a way to make it run faster? As you can see, the .html() I'm sniffing out is in children of the same parent element.
$('.parent').each(function(){
var address = $('.cellInnerWrapper .row-content .address a .addressNumber', this).html() +
$('.cellInnerWrapper .row-content .address a .addressDirection', this).html() +
$('.cellInnerWrapper .row-content .address a .addressName', this).html();
});
This just seems incredibly slow and repetitive to me, but I'm not the best at JavaScript and jQuery and don't know how to simplify it / speed it up.
Here's the original HTML structure:
<div class="parent">
<div class="cellInnerWrapper">
<div class="rowContent">
<div class="address">
<a href="URL">
<span class="addressNumber">17080 </span>
<span class="addressDirection"></span>
<span class="addressName">Iron Springs Road</span>
</a>
</div>
</div>
</div>
</div>

You can do something like this:
$(document).ready(function() {
$('.parent').each(function(){
var address;
var a = $('.cellInnerWrapper .rowContent .address a');
address = a.find('.addressNumber').html()+a.find('.addressDirection')+a.find('.addressName').html();
});
});
I adjusted to your html structure. Don't forget to use document.ready event to make sure the html structure was loaded before the script is executed.
Hope it helps!

Here is a working demo. You can store your common element in a new object and then access all the required elements that way you won't have to navigate the DOM every time.
$('.parent').each(function(){
var anchor = $('.cellInnerWrapper .rowContent .address a');
var address = anchor.find('.addressNumber').html() +
anchor.find('.addressDirection').html() +
anchor.find('.addressName').html();
console.log(address);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
<div class="cellInnerWrapper">
<div class="rowContent">
<div class="address">
<a href="URL">
<span class="addressNumber">17080 </span>
<span class="addressDirection"></span>
<span class="addressName">Iron Springs Road</span>
</a>
</div>
</div>
</div>
</div>

$('.parent').each(function(){
var a=$('.cellInnerWrapper').find('div.address').children('a').html();
$('div.newaddress').html(a);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
<div class="cellInnerWrapper">
<div class="rowContent">
<div class="address">
<a href="URL">
<span class="addressNumber">17080 </span>
<span class="addressDirection"></span>
<span class="addressName">Iron Springs Road</span>
</a>
</div>
<div class="newaddress"></div>
</div>
</div>
</div>
try this one.

Toggle between multiple divs

I have an issue. I want to toggle between many divs, while one shows the rest hide.
This is what I have so far.
Thanks in advance!
<a href="#n" onclick="toggle_visibility('box1');">
<div class="square img_1-1"></div>
</a>
<a href="#n" onclick="toggle_visibility('box2');">
<div class="square img_1-2"></div>
</a>
<a href="#n" onclick="toggle_visibility('box3');">
<div class="square img_1-3"></div>
</a>
<div id="box1" style='display:none;'>
<div class="trabajo">
<p>box1</p>
</div>
</div>
<div id="box2" style='display:none;'>
<div class="trabajo">
<p>box2</p>
</div>
</div>
<div id="box3" style='display:none;'>
<div class="trabajo">
<p>box3</p>
</div>
</div>
<a href="#n" onclick="toggle_visibility('box4');">
<div class="square img_2-1"></div>
</a>
<a href="#n" onclick="toggle_visibility('box5');">
<div class="square img_2-2"></div>
</a>
<a href="#n" onclick="toggle_visibility('box6');">
<div class="square img_2-3"></div>
</a>
<div id="box4" style='display:none;'>
<div class="trabajo">
<p>box4</p>
</div>
</div>
<div id="box5" style='display:none;'>
<div class="trabajo">
<p>box5</p>
</div>
</div>
<div id="box6" style='display:none;'>
<div class="trabajo">
<p>box6</p>
</div>
</div>
Also, here is the Javascript. I'm using toggle_visibility(id) The problem is that it start to get weird when I hide one box and open another it opens both then it just gets weird. It leaves both open then closes one.
var prevId;
function toggle_visibility(id) {
if(prevId && id !== prevId){
$("#"+prevId).toggle();
}
var e = document.getElementById(id);
$(e).toggle();
prevId = id;
}
There's also another javascript code I tried before, this one works sorta fine, the only thing it doesn't do is toggle it just shows the work and doesn't hide it, although it does toggle between different work.
top.visible_div_id = 'box1';
function toggle_visibility(id) {
var old_e = document.getElementById(top.visible_div_id);
var new_e = document.getElementById(id);
if(old_e) {
console.log('old', old_e, 'none');
old_e.style.display = 'none';
}
console.log('new', new_e, 'block');
new_e.style.display = 'block';
top.visible_div_id = id;
}

Instead of the onclick, I used the eventhandler on() (you should not inline-javascript). I coombine this with the data-attribute:
<a data-toggles="#box2">box 2</a>
And some changes to your javascript:
$('a.triggeringAnchor').on('click', function(e){
e.preventDefault() // stop the anchor
$('a.triggeringAnchor').hide(); // hide them all
$( $(this).data('toggles') ).show(); // bring the one back in the one back
})
You could use the :not() selectors, but this is a bit more obvious :)
The trick here is the 'bring back' line. I use the value of the data-attribute as selector for the actual element we want back.
This code has a big advantage over yours. If you add 1 more element, your counter would be to know about this (could be done via .length()), my code doesn't care. Everything gets hidden, and just that 1 will come back.

I think this jQuery Widget is exactly what you are looking for. Easy to implement and very usable. Plus, the jQuery API instructions make it a breeze to get onto your page.

Get Data attribute using delegation

This works great for me and I am able to get data-club-id:
<!-- this is an example -->
<a class="clubCode" href="" data-club-id= "1234">join with the code</a>
$("a.clubCode").on("click",function(e){
e.preventDefault();
var clubId = $(this).data('club-id');
alert(clubId)
});
but if I need to use delegation like here:
<a class="editReview" data-review-id="123" href="">Edit</a>
$(".eventFeedbackBottomContainer").on("click", "a.editReview", function(e){
e.preventDefault();
var reviewId = $(this).data('review-id');
alert(reviewId);
});
reviewId returns undefined.
<div class="eventFeedbackBottomContainer">
<div class="tabs">
<ul>
<li>Reviews</li>
<li>Hotels</li>
</ul>
</div>
<div class="rightFeedbackBottomContainer">
Add Review
</div>
<div id="panel1" class="panel">
<div class="feedbacksContainer">
<div class="show-reviews"></div><!-- a.editReview is inside each review loaded from a javascript file in this div-->
</div>
</div>
<div id="panel2" class="panel"/>
</div>
How can I do it?

Check this article on event delegation.
I only can think that your element of class 'editReview' wasnt a child of 'eventFeedbackBottomContainer'. Other than that seems to work as you wrote it.
Link to Jsfiddle
<div class="eventFeedbackBottomContainer">
...
<a class="editReview" data-review-id="123" href="">Edit</a>
<a class="editReview" data-review-id="456" href="">Edit</a>
</div>

try this way
$(".eventFeedbackBottomContainer").on("click", "a.editReview", function(e){
e.preventDefault();
var reviewId = $(this).attr('data-review-id'); //use .attr() for accessing attibutes
alert(reviewId);
});
LIVE DEMO for pages prior to html 5:
http://jsfiddle.net/dreamweiver/23XHj/7/
LIVE DEMO in html 5 pages:
http://jsfiddle.net/dreamweiver/23XHj/8/
Happy Coding :)

fixed it. the problem was that
<a class="editReview" data-review-id= "12345" href="">Edit</a>
was inside <div class="current-review"></div>. Everything worked as soon as I moved it outside
here the JSFiddle

Retrieve child node from parent node

I have created a document with html. I want to retrieve child node from the root node for that I am using following code...
That is HTML.
<a id="Main1" onclick="RetrieveElement(this);">Test1
<div name="Top1">
</div>
<div name="Middle1">
I'm Middle.
</div>
<div name="Bottom1">
</div>
</a>
<a id="Main2" onclick="RetrieveElement(this);">Test2
<div name="Top1">
</div>
<div name="Middle1">
I'm Middle.
</div>
<div name="Bottom1">
</div>
</a>
javascript.
function RetrieveElement(element){
alert(this.getElementByName("Middle1").innerHTML);
}
However, That is not working. I have tried finding the problem but cant solve it... Any help ?

If you want to get the first child element only:
var element = document.getElementById('Main1').children[0];
If you want to get the first anchor element:
var element = document.getElementById('Main1').getElementById('Middle1');

getElementById is a method of Document, not Element. Try this:
<script type="text/javascript">
function RetrieveElement(element){
window.alert(document.getElementById("Middle1").innerHTML);
}
</script>
<a id="Main1" href="#" onclick="RetrieveElement(this);">Test1</a>
<div id="Top1">
</div>
<div id="Middle1">
I'm Middle.
</div>
<div id="Bottom1">
</div>

Can you use jQuery?
It would be as easy as this