Develop Reference

Add a Like + Sort Function to existing dynamic funcion

I wrote a function that dynamically creates a webpage for me based on a json database.
Now I want to add 2 functions:
If you click the like img (its got the id button) the like counter should increase on the webpage by 1. Pretty easy just a on(click) with jQuery variable++ and then .text(variable)
A sort function - based on the likes one item received, you should be able to sort it (most liked div first, 2nd, 3rd....
I can write it for each individually with individual variables when I give all the like buttons and outputs a separate id but I wanted to make it dynamic so if you add new data to json file it dynamically works with the like and sort function.
The likes are not saved anywhere for now.
Since sitting on it for 3h and google so much and so much stackoverflow I think I overloaded my brain with different stuff and now nothing seems to work ^^
function filmInsert(insert) {
$.each(film, function(i, data) { //.each statt loop
let box =
`<div class="boxwrapper">
<div class="imgbox">
<img src="${data.img}" alt="${data.titel}">
</div>
<div class="textbox">
<h3>${data.titel}</h3>
<p>${data.beschreibung}</p>
<p> <a id="button${data.id}">
<img src="img/budspencer_official.png"> Like
</a>
<span class="output${data.id}">${data.likes}</span>
</p>
</div>
</div>`;
insert.append(box);
});
}

I've added a container element for the boxwrapper items as I assume you have one and as it's better to have one instead of just adding the sorted items to the body of the HTML document.
$(document).on("click", ".textbox a", function() {
let likes = parseInt($(this).closest(".textbox").find("span").text());
$(this).closest(".textbox").find("span").text(likes + 1);
});
$("#sort").on("click", function() {
let divs = $(".boxwrapper")
let sorted = divs.sort(function(a, b) {
return $(a).find("span").text() < $(b).find("span").text() ? 1 : -1;
});
$(".container").html(sorted);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="boxwrapper">
<div class="imgbox">
<img src="example.gif" alt="Title">
</div>
<div class="textbox">
<h3>Titel</h3>
<p>Description</p>
<p> <a id="button1">
<img src="https://dummyimage.com/40x40/000/fff&text=1"> Like
</a>
<span class="output1">0</span>
</p>
</div>
</div>
<div class="boxwrapper">
<div class="imgbox">
<img src="example.gif" alt="Title">
</div>
<div class="textbox">
<h3>Titel 2</h3>
<p>Description 2</p>
<p> <a id="button2">
<img src="https://dummyimage.com/40x40/000/fff&text=2"> Like
</a>
<span class="output2">0</span>
</p>
</div>
</div>
</div>
<button id="sort">
Sort
</button>

How can i retrieve informations from html tags in Javascript?

I am trying to pull certain item IDs based on if they have an image tag or not. For a given input like the one below:
<div id="ID_1">
<p><img src="image4.png"></p>
</div>
<div id="ID_2">
</div>
<div id="ID_3">
<p><img src="image6.png"></p>
</div>
<div id="ID_4">
<p><img src="image4.png"></p>
</div>
I could get something like:
ID_1: image4.png
ID_2:
ID_3: image6.png
ID_4: image4.png
I am not too familiar with HTML or Javascript, so any help or resources that someone may have or know will be greatly appreciated.

I would recommend using jQuery for something like this
(dont forget to include jquery in the html head)
Html =>
<div id="divContainer" >
<div id="ID_1">
<p><img src="image4.png"></p>
</div>
<div id="ID_2">
</div>
<div id="ID_3">
<p><img src="image6.png"></p>
</div>
<div id="ID_4">
<p><img src="image4.png"></p>
</div>
</div>
Javascript =>
const doesContainImg = [];
$(".divContainer div").each(function() {
// check for an img
if ($(this).find("img").length) {
// store id in array that contains ids that have imgs
doesContainImg.push($(this).attr("id"));
}
});
that should work, if it does not let me know!

Add a class on those div.
Let's say you have the class "image-div".
We can use this class to see if the divs contain an image or not.
JQUERY:
$(".image-div").each(function(){
if($(this).find('img').length){
//if this div contains an image do something.
}
});
You can attach this code to an event and use it

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.

Can't seem to get element ID

I have a list of images and I really need to get ID of each image inside my JS, but I don't know how to do that. I've tried this method, but it is returning empty string instead of ID. I tried getting it from DOM elements http://galleria.aino.se/docs/1.2/references/dom/ like $(".galleria-thumbnails img").click(function(){alert((this).id)}); but this method is not working, alert is simply not showing up. Also I did some research here http://galleria.aino.se/docs/1.2/api/methods/ and got this code, but this is showing alert of empty string.
$("#gallery").galleria({
});
myGalleria = Galleria.get(0);
myGalleria.$('thumbnails').click(function(){
alert((this).id);
});
gallery div
<div id="gallery">
<img id="someid" src="http://photoapproaches.files.wordpress.com/2010/03/helen-model-2272.jpg" />
<img id="otherid" src="http://leandrovieira.com/projects/jquery/lightbox/photos/image1.jpg" />
</div>
Console is empty of errors, nothing is showing in console. Also this markup is working fine the gallery plugin is making DOM elements on their own, and that is very frustrating with this situation. DOM structure can be viewed here, but I will link it in here as well http://galleria.aino.se/docs/1.2/references/dom/
<div class="galleria-container">
<div class="galleria-stage">
<div class="galleria-images">
<div class="galleria-image">
<img>
</div>
<div class="galleria-image">
<img>
</div>
</div>
<div class="galleria-loader"></div>
<div class="galleria-counter">
<span class="current"></span>
<span class="total"></span>
</div>
<div class="galleria-image-nav">
<div class="galleria-image-right-nav"></div>
<div class="galleria-image-left-nav"></div>
</div>
</div>
<div class="galleria-thumbnails-container [ carousel ]">
<div class="galleria-thumb-nav-left [ disabled ]"></div>
<div class="galleria-thumbnails-list">
<div class="galleria-thumbnails">
<div class="galleria-image">
<img>
</div>
[...]
</div>
</div>
<div class="galleria-thumb-nav-right [ disabled ]"></div>
</div>
<div class="galleria-info">
<div class="galleria-info-text">
<div class="galleria-info-title"></div>
<div class="galleria-info-description"></div>
<div class="galleria-info-author"></div>
</div>
</div>
<div class="galleria-tooltip"></div>
</div>

Here is a one way to access id of an element:
var currentId = $(this).attr('id');
For your case, you can try this:
myGalleria.$('thumbnails').click(function(){
alert($(this).attr('id'));
});

should it not be alert($(this).id);? (Note the $).

How to have a page load to the middle of the page (instead of top)?

I'd like for the page to open at a certain div halfway down the page, not at the top...
I have something like:
<div id="d1">
<div id="d2">
<div id="d3">
<div id="d4">
<div id="d5">
<div id="d6">
How can I get the page to open at #d4, instead of the top? (Besides adding #d4 to the end to the URL...)
I imagine there must be some easy way to do this, but I can't figure out how to go at searching for a solution! HTML, javascript? Any help is greatly appreciated.

<script>
function ScrollToElement(theElement){
var selectedPosX = 0;
var selectedPosY = 0;
while(theElement != null){
selectedPosX += theElement.offsetLeft;
selectedPosY += theElement.offsetTop;
theElement = theElement.offsetParent;
}
window.scrollTo(selectedPosX,selectedPosY);
}
</script>
http://radio.javaranch.com/pascarello/2005/01/09/1105293729000.html

Find div position using this
and then use the following javascript command:
window.scroll(0, DIV_POS); // horizontal and vertical scroll targets

EDIT: OOPS! didn't read the Except.... disregard!
Note to self, read the entire question before responding!
End EDIT
You could always use an HTML anchor tag
<a name="d1" />
<div id="d1">
<a name="d2" />
<div id="d2">
<a name="d3" />
<div id="d3">
<a name="d4" />
<div id="d4">
<a name="d5" />
<div id="d5">
<a name="d6" />
<div id="d6">
When you navigate to the page, you would include the anchor name in the url:
pagename.htm#d4
Make sure to close your div tags.
Good luck,
Patrick

You can use Javascript:
location.replace('#d4');