Develop Reference

How to get specific Div's/Card Details when user clicked that using javascript

I am creating various cards using fetch API, this cards are holding details like (Author, Title, Cover Image, etc.).
There is a lot of cards renders there once API call my struggle is how to get specific card data/details like ( author, title etc.) of clicked card. when user clicked any of the card from these set.
HTML
<div class="row" id="ShowReports">
<div class="col-lg-3 col-md-4 col-sm-6 mt-3" onclick="show(this)" id="card">
<div class="card p-1">
<img src="https://d3i5mgdwi2ze58.cloudfront.net/znuxxu2npw851eeboqayu3e35udn" alt="image"
class="bookimg" width="150" height="200">
<h6 class="mb-3 booktitle">${title1}</h6>
<p class="mb-0 bookpara" name="author">Author : ${author1}</p>
<p class="mb-3 bookpara" name="pages">Pages : ${pages1}</p>
Download1
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 mt-3" onclick="show(this)" id="card">
<div class="card p-1">
<img src="https://d3i5mgdwi2ze58.cloudfront.net/znuxxu2npw851eeboqayu3e35udn" alt="image"
class="bookimg" width="150" height="200">
<h6 class="mb-3 booktitle">${title2}</h6>
<p class="mb-0 bookpara" name="author">Author : ${author2}</p>
<p class="mb-3 bookpara" name="pages">Pages : ${pages2}</p>
Download2
</div>
</div>
</div>
javaScript
function show() {
var details = this.innerHTML
console.log(details)
}
Don't know what is the right approach or method to this...

UPDATED
We need to assign unique id to data elements. For example: id="${id}-author". Note that id is from your card id
<div class="col-lg-3 col-md-4 col-sm-6 mt-3" onclick="show(${id})" id="card">
<div class="card p-1">
<img src="https://d3i5mgdwi2ze58.cloudfront.net/znuxxu2npw851eeboqayu3e35udn" alt="image"
class="bookimg" width="150" height="200">
<h6 class="mb-3 booktitle" id="${id}-booktitle">${title1}</h6>
<p class="mb-0 bookpara" name="author" id="${id}-author">Author : ${author1}</p>
<p class="mb-3 bookpara" name="pages" id="${id}-pages">Pages : ${pages1}</p>
Download1
</div>
</div>
After that, we can implement show function like below
function show(id) {
const author = document.getElementById(id + "-author").innerHTML;
const booktitle = document.getElementById(id + "-booktitle").innerHTML;
const pages = document.getElementById(id + "-pages").innerHTML;
console.log({ author, booktitle, pages })
}
If you don't want to modify HTML, you also can try this way
onclick="show({ author: ${author}, booktitle: ${booktitle}, pages: ${pages} })"
And you need to have params corresponding to your data name
function show({ author, booktitle, pages }) {
console.log({ author, booktitle, pages })
}
OLD ANSWER
onclick="show(this)"
this in this context is referred to the global one, but from my understanding of your question, you're trying to get scoped context, so the change could be
onclick="show(event)"
To access the innerHTML from that click, you can try this way
function show(event) { //the param needs to be passed properly
var currentElement = event.target || event.srcElement;
var details = currentElement.innerHTML
console.log(details)
}
P/s: If you want to keep the global context on this, you also need to pass the param on show function.

# Nick Vu thanks for your comment your approach is quite logical and great well what i have did is, I have assigned a unique id to every card div while calling API and then target its childnode's innerHTMLS.
HTML
<div class="col-lg-3 col-md-4 col-sm-6 mt-3" id="card">
<div class="card p-1" id="second" onclick="show(id)">
<img src="https://d3i5mgdwi2ze58.cloudfront.net/znuxxu2npw851eeboqayu3e35udn" alt="image"
class="bookimg" width="150" height="200">
<h6 class="mb-3 booktitle">${title2}</h6>
<p class="mb-0 bookpara" name="author">Author : ${author2}</p>
<p class="mb-3 bookpara" name="pages">Pages : ${pages2}</p>
Download2
</div>
</div>
</div>
javascript
function show(e) {
console.log(e)
var details = document.getElementById(e)
console.log(details)
console.log(details.childNodes[1].src)
console.log(details.childNodes[3].innerHTML)
console.log(details.childNodes[5].innerHTML)
console.log(details.childNodes[7].innerHTML)
}
this is working around what i want as output.. thanks. Or may be at last i can do forEach loop of childnodes to make it more short.

Display inline with javascript

I have some cards who are supposed to be inline, but I have to use a display none on them. When I click on a specific button, I want to display these cards; but when I do that, each cards appears to take a row when I want to have them on the same row
<div class="row" id="menu_lv2r">
<div class="col-lg-2">
<div class="card card-chart">
<div class="card-header">Character 1</div>
<div class="card-body card-body-top">
<img class="card-img" alt="character_image" src="./images/char1.jpg"/>
</div>
</div>
</div>
<div class="col-lg-2">
<div class="card card-chart">
<div class="card-header">Character 2</div>
<div class="card-body card-body-top">
<img class="card-img" alt="character_image" src="./images/char2.jpg"/>
</div>
</div>
</div>
</div>
Theses were my 2 cards examples
If I let the code like that, they are all inline which is what I want
Now If I add some css to hide them
#menu_lv2r{
display: none;
}
The row with the 2 cards disapeared which is still fine.
But now, when I use some Js to print them again, they appear in one row each.
var elt = document.getElementById('menu_lv2r');
elt.style.display = "inline";
Thanks for your help

You should use display: flex for parent element.
elt.style.display = "flex";
It's the default value for bootstrap class .row.

Just use flex instead of inline. Everything works fine

I want to write icon names inside the paths of images <img source=""> tag

I am using Dark Sky API to get weather information and icon parameter gives me cloudy, partly-cloudy, sunny etc. I saved icon images same name with icon names in the folder. I want to write this parameter inside the source path like
<img src="..\..\icon\weather\ $forecast.weatherDays[0].icon .png" height="300vh" width="300vw">
weather.html
<div id="day1"> <div id="icon"></div> </div>
<div id="day2"> <div id="icon"></div> </div>
weatherManager.js
document.querySelector("#day1 #icon").innerHTML=forecast.weatherDays[0].icon;
document.querySelector("#day2 #icon").innerHTML=forecast.weatherDays[0].icon;
How can I do that?

you need to add the image inside the div using the following code:
var forecast = {};
forecast.weatherDays = [];
forecast.weatherDays[0]= { icon :'partly-cloudy'};
forecast.weatherDays[1]= { icon :'image8-2'};
//console.log(forecast.weatherDays)
document.querySelector("#day1 #icon").innerHTML= '<img src="..\\..\\icon\\weather\\'+forecast.weatherDays[0].icon+'.png" height="300vh" width="300vw">';
document.querySelector("#day2 #icon").innerHTML= '<img src="https://blog.hubspot.com/hubfs/'+forecast.weatherDays[1].icon+'.jpg" height="300vh" width="300vw">';
<div id="day1"> <div id="icon"></div> </div>
<div id="day2"> <div id="icon"></div> </div>

removing and adding a class based on position within an array Angular

I am creating a blog page using angular 5 where each of the blog posts have the class:
col-md-4
However, what I want is the latest blog post (i.e the first on the page) to have the class of :col-md-12.
The html that I have is as follows:
<div *ngFor="let blog of blogs" class="blog-posts col-md-4">
<div class="card">
<img class="blog-img" (click)="goToBlogDetailsPage(blog.sys.id)"src="{{blog.fields.blogimage.fields.file.url}}" class="rounded" alt="">
<div class="info">
<h3 class="author">{{blog.fields.authorInfo}}</h3>
<h2 (click)="goToBlogDetailsPage(blog.sys.id)" class="title">{{blog.fields.title}}</h2>
<p class="short-desc" > {{blog.fields.desciption}}</p>
<img (click)="goToBlogDetailsPage(blog.sys.id)" class="sml-logo" src="/assets/img/logos/logo_blue.png" alt="">
<!-- <button (click)="goToBlogDetailsPage(blog.sys.id)"class="btn btn-info">Open Blog Post</button> -->
</div>
</div>
</div>
</div>
</div>
I have tried accessing the index of the array[0] however I can not seem to alter the styling on just the first item, any suggestions?

Use index and ternary operator to set the class
<div *ngFor="let blog of blogs; let ind = index" class="blog-posts"
[ngClass]="ind === 0 ? 'col-md-12' : 'col-md-4'" >

How to add links to images within HTML dynamically with JS?

I have 50 divs like the below, and the image is not clickable. I would like to make the image clickable, depending on what link the div contains: it is always the href link in the article_title tag.
How can I achieve this with adding just a few lines of JavaScript?
I was thinking of adding an ID to each img tag manually, and then use getElementById and do some magic, but that would take too long.
<div class="col-md-4 article">
<img src="7tips.jpg" alt="Canary Wharf" title="7 Tips For Lasting In Your Career" width="324" height="235">
<div class="article_category">
<a href=”http://www.canarywharfian.co.uk/forums/wealth-management/”>Wealth Management</a>
</div>
<div class="article_meta">
<h1 class="article_title">7 Tips For Lasting In Your Career</h1>
<div class="col-md-6 author_date">SmallCapPM - <span class="date"> Mar 10, 2016</span></div>
<div class="article_abstract">
Many of you are hoping and planning for a long and successful career in finance...
</div>
</div>
</div>

Maybe this (using jQuery):
<script>
$(document).ready(function () {
$('.block').each(function( index, value ) {
let href = $(this).find('a[href]').attr('href');
$(this).find('img').wrap('<a href=' + href + '></a>');
});
});
</script>

if you use jQuery, you can simply wrapping the images with element.
$(function(){
// traversing all the images
$('img').each(function(){
// get the link by finding from parent
var link = $(this).parent().find('.article_title a').attr('href');
// replace the image with link + image
$(this).replaceWith('' + $(this)[0].outerHTML + '');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<div class="col-md-4 article">
<img src="http://www.canarywharfian.co.uk/7tips.jpg" alt="Canary Wharf" title="7 Tips For Lasting In Your Career" width="324" height="235">
<div class="article_category">
Wealth Management
</div>
<div class="article_meta">
<h1 class="article_title">7 Tips For Lasting In Your Career</h1>
<div class="col-md-6 author_date">SmallCapPM - <span class="date"> Mar 10, 2016</span></div>
<div class="article_abstract">
Many of you are hoping and planning for a long and successful career in finance...
</div>
</div>
</div>

Per your tag of vanila Javascript, what you can do is to search for and cache all your articles. Within each article search for anchor inside your title and set its href to a newly created anchor. Append the image into the newly created anchor and prepend it into your article.
A simple example (H1 font-size reduced for demo):
var articles = document.getElementsByClassName('article');
[].forEach.call(articles, function(article) {
var image = article.querySelector('img:first-child');
var title = article.querySelector('h1.article_title > a');
var anchor = document.createElement('a');
anchor.href = title.href;
anchor.appendChild(image);
article.insertBefore(anchor, article.firstChild);
});
h1 { font-size: 12px; }
<div class="col-md-4 article">
<img src="//placehold.it/120x64" alt="Canary Wharf" title="7 Tips For Lasting In Your Career">
<div class="article_category">
Wealth Management
</div>
<div class="article_meta">
<h1 class="article_title">7 Tips For Lasting In Your Career</h1>
<div class="col-md-6 author_date">SmallCapPM - <span class="date"> Mar 10, 2016</span></div>
<div class="article_abstract">
Many of you are hoping and planning for a long and successful career in finance...
</div>
</div>
</div>
<hr/>
<div class="col-md-4 article">
<img src="//placehold.it/120x64" alt="Canary Wharf" title="7 Tips For Lasting In Your Career">
<div class="article_category">
Wealth Management
</div>
<div class="article_meta">
<h1 class="article_title">7 Tips For Lasting In Your Career</h1>
<div class="col-md-6 author_date">SmallCapPM - <span class="date"> Mar 10, 2016</span></div>
<div class="article_abstract">
Many of you are hoping and planning for a long and successful career in finance...
</div>
</div>
</div>
Notice, how the links to bing and google are picked up from the title anchors and inserted into a new anchor wrapping the images.