We Keep Coding

jquery loop add elements onclick

I am really new with javascript
I am trying to loop my json then add the images to my html, then i need to make it so when i click on that image it shows me the File from my json
var obj = JSON.parse(data);
for (index = 0; index < obj.length; ++index) {
var file = obj[index]['File'];
var image = obj[index]['Image'];
var test = $( ".row" ).append(
`<div class="column">
<div class="card">
<img src="${image}" alt="Avatar" style="width:100%">
<div class="container">
<h4>
<b>Title</b>
</h4>
</div>
</div>
</div>`
);
test.click(function(e) {
alert(file);
});
console.log(file);
console.log(image);
}

How to make loop out of these?

How to make loop out of following HTML?
HTML
<div class="dropdown-content" ng-repeat="cat in categoryList | orderBy: 'id'">
<a ng-click="getProductsByCategory(1)" ng-model="category.id">Cakes</a>
<a ng-click="getProductsByCategory(2)" ng-model="category.id">Pies</a>
<a ng-click="getProductsByCategory(3)" ng-model="category.id">Donuts</a>
<a ng-click="getProductsByCategory(4)" ng-model="category.id">Strudels and kishi</a>
<a ng-click="getProductsByCategory(5)" ng-model="category.id">Macaroons</a>
<a ng-click="getProductsByCategory(6)" ng-model="category.id">Cheesecakes</a>
<a ng-click="getProductsByCategory(7)" ng-model="category.id">Ice cream</a>
<a ng-click="getProductsByCategory(8)" ng-model="category.id">Assorti</a>
<a ng-click="getProductsByCategory(9)" ng-model="category.id">Low-calorie</a>
<a ng-click="getProductsByCategory(10)" ng-model="category.id">Guacamole</a>
<a ng-click="getProductsByCategory(11)" ng-model="category.id">Сroissants</a>
<a ng-click="getProductsByCategory(12)" ng-model="category.id">Sorbet</a>
<a ng-click="getProductsByCategory(13)" ng-model="category.id">Tiramisu</a>
<a ng-click="getProductsByCategory(14)" ng-model="category.id">Cookies</a>
<a ng-click="getProductsByCategory(15)" ng-model="category.id">Fruit and Puree</a>
</div>
What I tried
I tried JavaScript but I had problem with quotation marks:
let i; for (i=1; i<=16; i++) { document.writeln("<a ng-click="getProductsByCategory('+i+')">category.name</a>"); }

I'm not sure if I understood the point correctly. But if you want to generate the list automatically using JS you can use this loop:
var arr = ['Cakes', 'Pies', 'Donuts', 'Strudels and kishi', 'Macaroons', 'Cheesecakes', 'Ice cream', 'Assorti', 'Low-calorie', 'Guacamole', 'Сroissants', 'Sorbet', 'Tiramisu', 'Cookies', 'Fruit and Puree'];
var res = '';
for (var i = 0; i < arr.length; i++) {
res += '<a ng-click="getProductsByCategory(' + (i + 1) + ')" ng-model="category.id">' + arr[i] + '</a> <br>';
}
var wrap = document.getElementsByClassName('dropdown-content')[0];
wrap.innerHTML = res;
<div class="dropdown-content" ng-repeat="cat in categoryList | orderBy: 'id'"></div>

Am I missing something in my JavaScript code that I may be overlooking?

I'm creating a simple app that when you click on a blurred image, the un-blurred image will appear, but it does not seem to be working for some reason. I used Bootstrap in this app to allow it to be mobile friendly, although I do not believe that it is causing my JS code to break.
Here is my markup:
<div class="container">
<div class="row row-padding center-block">
<div class="col-lg-4 col-md-6 col-sm-6">
<img id="zero" src="zeroblur.jpg">
</div><!-- end col-lg-4 col-sm-6 -->
<div class="col-lg-4 col-md-6 col-sm-6">
<img id="one" src="oneblur.jpg">
</div><!-- end col-lg-4 col-sm-6 -->
<div class="col-lg-4 col-md-6 col-sm-6">
<img id="two" src="twoblur.jpg">
</div><!-- end col-lg-4 col-sm-6 -->
<div class="col-lg-4 col-md-6 col-sm-6">
<img id="three" src="threeblur.jpg">
</div><!-- end col-lg-4 col-sm-6 -->
<div class="col-lg-4 col-md-6 col-sm-6">
<img id="four" src="fourblur.jpg">
</div><!-- end col-lg-4 col-sm-6 -->
<div class="col-lg-4 col-md-6 col-sm-6">
<img id="five" src="fiveblur.jpg">
</div><!-- end col-lg-4 col-sm-6 -->
</div><!-- end row -->
</div><!-- end container-fluid -->
(I only included the markup pertaining to my JS code)
and here is my JS code:
function init() {
var images = document.getElementsByTagName("img");
for (var i = 0; i < images.length; i++);
images[i].onclick = showAnswer;
};
function showAnswer(eventObj) {
var image = eventObj.target;
var name = image.id;
name = name + ".jpg";
image.src = name;
}
window.onload = init;

This:
for (var i = 0; i < images.length; i++);
images[i].onclick = showAnswer;
Should be this:
for (var i = 0; i < images.length; i++){
images[i].onclick = showAnswer;
}

The answer is that your loop is doing exactly nothing but changing the value of i.
var i = 0;
for (; i < images.length; i += 1) ; // semicolon means end-of-statement (ie: do nothing)
So technically your last image should be clickable (because i has been changed to the last number before the length of the array).
If you remove the semicolon, the statement should just work.
var i = 0;
for (; i < images.length; i += 1)
images[i].onclick = showAnswer;
However, this is why I tell the people on my teams that they should always use braces around if, while, for, etc...
var i = 0;
for (; i < images.length; i += 1) {
images[i].onclick = showAnswer;
}
We're now dealing with a much more explicit set of behaviours.
That's not to say that languages with significant whitespace are bad, but to say that it gets confusing when you start mixing and matching when whitespace matters and when it doesn't, within the same function, let alone the same file.
Additionally, I have them use more functional techniques.
images.forEach( img => img.onclick = showAnswer );
forEach isn't hugely functional, but it's better than worrying about funny loop behaviour, at least.
Of course, if images is a NodeList of some kind (eg: comes from document.get____( ); or document.querySelectorAll( ), then you have to take it one step further:
[].slice.call(images).forEach( img => img.onclick = showAnswer );
Which is better broken into two steps:
function toArray (arrLike, start, end) {
return [].slice.call(arrLike, start, end);
}
toArray(images).forEach( img => img.onclick = showAnswer );

Your init function has an extra semicolon at the end of the for line.
Best practice is to always use brackets, so you avoid this kind of problems.
So replace your init function with this and it should work just fine:
function init() {
var images = document.getElementsByTagName("img");
for (var i = 0; i < images.length; i++) {
images[i].onclick = showAnswer;
}
};

You cannot add an event listener to the images like this:
images[i].onclick = showAnswer;
Use:
images[i].addEventListener('click', showAnswer);

how to create generic html with javascript

I have the following html:
<div id="prog" class="downloads clearfix">
<div class="item">
<div class="image_container">
<img src="/img/downloads/company.png" width="168" height="238" alt="">
</div>
<div class="title">
pricelist: <label id="pr1"></label>
</div>
<div class="type">
pdf document
</div>
<div class="link">
<a id="pdfdocument" class="button" target="_blank" href="#">start Download </a>
</div>
</div>
</div>
I want build HTML which is inside the <div id="prog"> with Javascript:
<div id="prog" class="downloads clearfix"></div>
I'm trying to use this Javascript, but without success:
var tmpDocument, tmpAnchorTagPdf, tmpAnchorTagXls, parentContainer, i;
parentContainer = document.getElementById('prog');
for (i = 0; i < documents.length; i++) {
tmpDocument = documents[i];
tmpAnchorTagPdf = document.createElement('a id="pdfdocument" ');
tmpAnchorTagPdf.href = '/role?element=' + contentElement.id + '&handle=' + ope.handle;
tmpAnchorTagPdf.innerHTML = 'start Download';
tmpAnchorTagXls = document.createElement('a');
tmpAnchorTagXls.href = '/role?element=' + contentElement.id + '&handle=' + ope.handle;
tmpAnchorTagXls.innerHTML = 'start Download';
parentContainer.appendChild(tmpAnchorTagPdf);
parentContainer.appendChild(tmpAnchorTagXls);
}

If this is a section of code that you will be using more than once, you could take the following approach.
Here is the original div without the code you want to create:
<div id="prog" class="downloads clearfix">
</div>
Create a template in a hidden div like:
<div id="itemtemplate" style="display: none;">
<div class="item">
<div class="image_container">
<img src="/img/downloads/company.png" width="168" height="238" alt="">
</div>
<div class="title">
pricelist: <label></label>
</div>
<div class="type">
pdf document
</div>
<div class="link">
<a class="button" target="_blank" href="#">start Download </a>
</div>
</div>
</div>
Then duplicate it with jquery (OP originally had a jquery tag; see below for JS), update some HTML in the duplicated div, then add it to the document
function addItem() {
var item = $("#itemtemplate div.item").clone();
//then you can search inside the item
//let's set the id of the "a" back to what it was in your example
item.find("div.link a").attr("id", "pdfdocument");
//...the id of the label
item.find("div.title label").attr("id", "pr1");
//then add the objects to the #prog div
$("#prog").append(item);
}
update
Here is the same addItem() function for this example using pure Javascript:
function JSaddItem() {
//get the template
var template = document.getElementById("itemtemplate");
//get the starting item
var tempitem = template.firstChild;
while(tempitem != null && tempitem.nodeName != "DIV") {
tempitem = tempitem.nextSibling;
}
if (tempitem == null) return;
//clone the item
var item = tempitem.cloneNode(true);
//update the id of the link
var a = item.querySelector(".link > a");
a.id = "pdfdocument";
//update the id of the label
var l = item.querySelector(".title > label");
l.id = "pr1";
//get the prog div
var prog = document.getElementById("prog");
//append the new div
prog.appendChild(item);
}
I put together a JSFiddle with both approaches here.

Replace <img class="image"> with <span class = "image"> using YUI3 or Javascript, No jQuery

Replace an image node with a span node so that:
<div class = "imageholder">
<img class="image" src="#" title="image">
</div>
becomes
<div class = "imageholder">
<span class="image" title="image"></span>
</div>
Would like to use YUI3, but just plain javascript will do too. No jQuery please!
Thanks!

var imgs = document.querySelectorAll(".imageholder > img");
for (var i = 0; i < imgs.length; i++) {
var span = document.createElement("span");
span.className = span.title = "image";
imgs[i].parentNode.replaceChild(span, imgs[i]);
}
http://jsfiddle.net/he6QM/