We Keep Coding

Fire JS code for every element with the same class

I have a cart page with multiple products that have a new price. I now want to show the customer, using JS, how much he can save. For that I use my very basic knowledge of JS to write the old and new price into a variable, replace stuff I don't want in there like "€" and do my math. Then I create a new div with a certain text and how much the customer can save. What I want to achieve is that he writes that under every product.
As you can see from the snippet he only does that for the first product. I need some kind of loop or anything where he does that code for every product in the cart. So far I searched for 2 hours and couldn't find a hint. Maybe you guys and girls can help me.
var neuerpreis = document.querySelector(".price.price--reduced").childNodes[2].nodeValue.replace(/,/g, '.').replace(/ /g, '');
var alterpreis = document.querySelector(".price.price--reduced .price__old").childNodes[2].nodeValue.replace(/,/g, '.').replace(/ /g, '');
var difference = (alterpreis - neuerpreis).toFixed(2);
var newDiv = document.createElement("div");
var newContent = document.createTextNode(("You save ") + difference + (" €"));
newDiv.appendChild(newContent);
document.querySelector(".cart-item__price").appendChild(newDiv);
<div class="cart-item ">
<div class="cart-item__row">
<div class="cart-item__image">
<div class="cart-item__details">
<div class="cart-item__details-inner">
<div class="cart-item__price">
<div class="price price--reduced">
<span class="price__currency">€</span> 66,95<span class="price__old">
<span class="price__currency">€</span> 79,00</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="cart-item ">
<div class="cart-item__row">
<div class="cart-item__image">
<div class="cart-item__details">
<div class="cart-item__details-inner">
<div class="cart-item__price">
<div class="price price--reduced">
<span class="price__currency">€</span> 100,95<span class="price__old">
<span class="price__currency">€</span> 79,00</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

You can use querySelecetorAll and relative addressing
I select the .cart-item__price as the relevant container
Then I set some content as default
Note I do not convert to the string (toFixed) until I want to present it.
The INTL number formatter could also be used here
[...document.querySelectorAll(".cart-item__price")].forEach(div => {
const neuerpreis = div.querySelector(".price--reduced").childNodes[2].nodeValue.replace(/,/g, '.').replace(/ /g, '');
const alterpreis = div.querySelector(".price__old").childNodes[2].nodeValue.replace(/,/g, '.').replace(/ /g, '');
const difference = alterpreis - neuerpreis;
let newContent = document.createTextNode("No savings on this product")
const newDiv = document.createElement("div");
if (difference > 0) {
newContent = document.createTextNode(("You save ") + difference.toFixed(2) + (" €"));
}
newDiv.appendChild(newContent);
div.appendChild(newDiv);
})
<div class="cart-item ">
<div class="cart-item__row">
<div class="cart-item__image">
<div class="cart-item__details">
<div class="cart-item__details-inner">
<div class="cart-item__price">
<div class="price price--reduced">
<span class="price__currency">€</span> 66,95
<span class="price__old">
<span class="price__currency">€</span> 79,00
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="cart-item ">
<div class="cart-item__row">
<div class="cart-item__image">
<div class="cart-item__details">
<div class="cart-item__details-inner">
<div class="cart-item__price">
<div class="price price--reduced">
<span class="price__currency">€</span> 100,95<span class="price__old">
<span class="price__currency">€</span> 79,00</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

var el = document.querySelectorAll(".test_class");
for (i = 0; i < el.length; i++) {
el[i].innerHTML = "test"+i
}
<div class="test_class">hey</div>
<div class="test_class">hey</div>
<div class="test_class">hey</div>
<div class="test_class">hey</div>
Here you go

Create input field dynamically

I have created input fields dynamically. After choosing file, I want to preview each image. But I can preview only first one. Run the code snippet below to understand me.
I would be glad if someone can help me.
$(document).ready(function () {
$("#imageBrowes").change(function () {
var File = this.files;
if (File && File[0]) {
ReadImage(File[0]);
}
})
})
var ReadImage = function (file) {
var reader = new FileReader;
var image = new Image;
reader.readAsDataURL(file);
reader.onload = function (_file) {
image.src = _file.target.result;
image.onload = function () {
var height = this.height;
var width = this.width;
var type = file.type;
var size = ~~(file.size / 1024) + "KB";
$("#targetImg").attr('src', _file.target.result);
$("#description").text("Size:" + size + ", " + height + "X " + width + ", " + type + "");
$("#imgPreview").show();
var html = '';
html += '<div class="col-md-6"> <div class="btn "> <input type="file" name="Photo" id="imageBrowes" class="inputfile" multiple /> </div> <div id="imgPreview" class="thumbnail" style="display:none"> <img class="img-responsive img-fluid" id="targetImg" /> <div class="caption"> <i class="fas fa-trash-alt"></i> <span id="description"></span> </div> </div> </div>';
$('#newRow').append(html);
}
}
}
<div id="newRow">
<div class="col-md-6">
<div class="btn ">
<input type="file" name="Photo" id="imageBrowes" class="inputfile" multiple />
</div>
<div id="imgPreview" class="thumbnail" style="display:none">
<img class="img-responsive img-fluid" id="targetImg" />
<div class="caption">
<i class="fas fa-trash-alt"></i>
<span id="description"></span>
</div>
</div>
</div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

What do you think of that solution?
$(document).ready(function() {
attachFileChangeHandler()
})
function attachFileChangeHandler() {
$(".imageBrowse").change(function() {
var File = this.files;
if (File && File[0]) {
ReadImage($(this).parent().parent(), File[0]);
}
})
}
function createNewFileInput() {
var html = '';
html += `
<div class="col-md-6">
<div class="btn">
<input type="file" name="Photo" class="inputfile imageBrowse" multiple />
</div>
<div class="thumbnail imgPreview" style="display:none">
<img class="img-responsive img-fluid targetImg"/> <div class="caption">
<a href="#" id="Clearphoto">
<i class="fas fa-trash-alt"></i></a>
<span class="description"></span>
</div>
</div>
</div>`;
$('#newRow').append(html);
setTimeout(attachFileChangeHandler, 100)
}
var ReadImage = function(parent, file) {
var reader = new FileReader;
var image = new Image;
reader.readAsDataURL(file);
reader.onload = function(event) {
var data = event.target.result;
image.src = data;
image.onload = function() {
var height = this.height;
var width = this.width;
var type = file.type;
var size = ~~(file.size / 1024) + "KB";
parent.find(".targetImg").attr('src', data);
parent.find(".description").text("Size:" + size + ", " + height + "X " + width + ", " + type + "");
parent.find(".imgPreview").show();
createNewFileInput();
}
}
}
<div id="newRow">
<div class="col-md-6">
<div class="btn ">
<input type="file" name="Photo" class="inputfile imageBrowse" multiple />
</div>
<div class="thumbnail imgPreview" style="display:none">
<img class="img-responsive img-fluid targetImg" />
<div class="caption">
<a href="#" id="Clearphoto">
<i class="fas fa-trash-alt"></i>
</a>
<span class="description"></span>
</div>
</div>
</div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

Read URL From Javascript variable into HTML

I have a card in my web page that reads in Automation Data and displays it in the card my the page. I am about to read in all the needed data except for the URL to the automation test summary.
Here is my code:
function Cox() {
jQuery.ajax({
method: "POST",
dataType: "JSON",
url: "http://localhost:8080/sanityTestDataCox.php",
success: function(data) {
console.log(data);
var total = data[0];
var passed = data[1];
var failed = data[2];
var time = data[3];
var url = data[4];
document.getElementById('coxTotal').innerHTML = "Total tests: " + total;
document.getElementById('coxFailed').innerHTML = "Failed tests: " + failed;
document.getElementById('coxPassed').innerHTML = "Passed tests: " + passed;
document.getElementById('coxRunTime').innerHTML = "Run Time: " + time;
document.getElementById('coxUrl').innerHTML = "url " + url;
}
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="card text-white bg-primary o-hidden h-100">
<a class="card-header text-white clearfix small z-1" href="#">
<span class="float-left">COX Sanity Run </span>
</a>
<div class="card-body">
<div class="card-body-icon">
<i class="fa fa-fw fa-tasks"></i>
</div>
<div id="coxTotal" class="mr-5">
<script type="text/javascript">
Cox();
</script>
</div>
<div id="coxFailed" class="mr-5">
<script type="text/javascript">
Cox();
</script>
</div>
<div id="coxPassed" class="mr-5">
<script type="text/javascript">
Cox();
</script>
</div>
<div id="coxRunTime" class="mr-5">
<script type="text/javascript">
Cox();
</script>
</div>
</div>
<a class="card-footer text-white clearfix small z-1" href="#">
<span class="float-left">View Details</span>
<span class="float-right">
<i class="fa fa-angle-right"></i>
</span>
</a>
</div>
When I try to load the URL into the HMTL like I did for the other 4 variables it does not seem to work correctly. Any ideas?
UPDATE:
Thank you for the helpful comments on how to clean up my code. I have aded it in and it has made it a lot cleaner. I have also found the following post that has provided a solution to my issue. Thanks
document.getElementById to include href

You will get the error message as "Uncaught ReferenceError: Cox is not defined" because you are calling 'Cox()' function before define it. DOM will process line by line and during that time, the function does not exist.
I changed your code and mentioned below. it will work as you expected. :)
I called 'Cox()' function after definition. You can change the place where ever you want but after definition.
<html>
<body>
<div class="card text-white bg-primary o-hidden h-100">
<a class="card-header text-white clearfix small z-1" href="#">
<span class="float-left">COX Sanity Run </span>
</a>
<div class="card-body">
<div class="card-body-icon">
<i class="fa fa-fw fa-tasks"></i>
</div>
<div id="coxTotal" class="mr-5"></div>
<div id="coxFailed" class="mr-5"></div>
<div id="coxPassed" class="mr-5"></div>
<div id="coxRunTime" class="mr-5"></div>
</div>
<a class="card-footer text-white clearfix small z-1" href="#">
<span class="float-left">View Details</span>
<span class="float-right">
<i class="fa fa-angle-right"></i>
</span>
</a>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript">
function Cox()
{
jQuery.ajax({
method: "POST",
dataType: "JSON",
url: "http://localhost:8080/sanityTestDataCox.php",
success: function (data) {
console.log(data);
var total = data[0];
var passed = data[1];
var failed = data[2];
var time = data[3];
var url = data[4];
document.getElementById('coxTotal').innerHTML = "Total tests: " + total;
document.getElementById('coxFailed').innerHTML = "Failed tests: " + failed;
document.getElementById('coxPassed').innerHTML = "Passed tests: " + passed;
document.getElementById('coxRunTime').innerHTML = "Run Time: " + time;
document.getElementById('coxUrl').innerHTML = "url " + url;
}
});
}
Cox();
</script>
</body>
</html>

You should only call Cox() once: when the page loads as it targets all the divs anyway. Also, Cox() is undefined because you call it before you define it.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
function Cox() {
jQuery.ajax({
method: "POST",
dataType: "JSON",
url: "http://localhost:8080/sanityTestDataCox.php",
success: function(data) {
console.log(data);
var total = data[0];
var passed = data[1];
var failed = data[2];
var time = data[3];
var url = data[4];
document.getElementById('coxTotal').innerHTML = "Total tests: " + total;
document.getElementById('coxFailed').innerHTML = "Failed tests: " + failed;
document.getElementById('coxPassed').innerHTML = "Passed tests: " + passed;
document.getElementById('coxRunTime').innerHTML = "Run Time: " + time;
document.getElementById('coxUrl').innerHTML = "url " + url;
}
});
}
window.onload = function(){
Cox();
}
</script>
<div class="card text-white bg-primary o-hidden h-100">
<a class="card-header text-white clearfix small z-1" href="#">
<span class="float-left">COX Sanity Run </span>
</a>
<div class="card-body">
<div class="card-body-icon">
<i class="fa fa-fw fa-tasks"></i>
</div>
<div id="coxTotal" class="mr-5">
</div>
<div id="coxFailed" class="mr-5">
</div>
<div id="coxPassed" class="mr-5">
</div>
<div id="coxRunTime" class="mr-5">
</div>
</div>
<a class="card-footer text-white clearfix small z-1" href="#">
<span class="float-left">View Details</span>
<span class="float-right">
<i class="fa fa-angle-right"></i>
</span>
</a>
</div>

JavaScript nested function returning the id of only the first div, when clicked

I have this function that returns when an an ajax has been called, however the function returns only the id of the first div in the post and repeats the same id number for the next elements or div tags. However, when the function is used on click with specified $(this) it returns the unique div of the other elements. Please help. Here's the code.
$(document).on("click", ".likeTypeAction", function () {
var reaction_id = $('.likeTypeAction');
var reactionType = $(this).attr("data-reaction");
var reactionName = $(this).attr("original-title");
var rel = $(this).parent().parent().attr("rel");
var x = $(this).parent().parent().attr("id");
var sid = x.split("reaction");
var id_post = sid[1];
var htmlData = '<i class="' + reactionName.toLowerCase() + 'IconSmall likeTypeSmall" ></i>' + reactionName;
var dataString = 'id_post=' + id_post + '&rid=' + reactionType;
$.ajax({
url: 'ajaxReaction',
type: "post",
data: {"done": 1, "id_post": id_post, "rid": reactionType},
beforeSend: function () {
alert(id_post);
},
success: function (data) {
displayReaction();
},
});
});
function displayReaction() {
a = $("#reactionEmoji");
var cls = $(this.a).parent().attr('class');
var n = cls.split("reaction");
var reactionNew = n[1];
$.ajax({
url: 'ajaxReaction',
type: "post",
data: {
"getReaction": 1, "reactionNew": reactionNew
},
beforeSend: function () {
alert(reactionNew);
},
success: function (data) {
}
})
}
myInstance = new displayReaction();
echo '<div id="reaction" class="reaction' . $id_post . '">
<div id="reactionEmoji">nothing</div>
</div>';
echo'<div class="reaction-action">';
echo '<div rel="unlike" c="undefined" id="reaction' . $id_post . '" class="likeDiv">
<div class="tooltipster-content">
<span class="likeTypeAction" original-title="Like" data-reaction="1">
<i class="likeIcon likeType"></i>
</span>
<span class="likeTypeAction" original-title="Amei" data-reaction="2">
<i class="ameiIcon likeType"></i>
</span>
<span class="likeTypeAction" original-title="Haha" data-reaction="3">
<i class="hahaIcon likeType"></i>
</span>
<span class="likeTypeAction" original-title="Uau" data-reaction="4">
<i class="uauIcon likeType"></i>
</span>
<span class="likeTypeAction" original-title="Triste" data-reaction="5">
<i class="tristeIcon likeType"></i>
</span>
<span class="likeTypeAction last" original-title="Grr" data-reaction="6">
<i class="grrIcon likeType"></i>
</span>
</div>
<div class="tooltipster-arrow-top tooltipster-arrow" style="">
<span class="tooltipster-arrow-border" style="margin-bottom: -1px; border-color: rgb(222, 222, 222);"></span>
<span style="border-color:rgb(255, 255, 255);"></span>
</div>
</div>';

There are a couple issues with your code.
I suppose the PHP code you provided is in some kind of loop : $id_post suggests your looping through some data and printing this HTML for each post.
If it is inside a loop, you are going to have, in your document, for each loop :
<div id="reaction" class="reaction' . $id_post . '">
<div id="reactionEmoji">nothing</div>
</div>
You can't have several HTML elements with the same id.
And since you are using the reactionEmoji id in your displayReaction function, you may want to fix that :
function displayReaction() {
a = $("#reactionEmoji");
var cls = $(this.a).parent().attr('class');
var n = cls.split("reaction");
var reactionNew = n[1];
/* .... */
alert(reactionNew);
}
In the snippet below :
I replaced your PHP code with 3 HTML generated codes
I added some labels to replace your icon (we didn't have your CSS)
I made both divs ids unique
I corrected your displayReaction function so that it takes the id of the reaction you want to display as a parameter.
I'm not sure it does what you want it to do, but it should help you solve your issues.
$(document).on("click",".likeTypeAction",function()
{
var reaction_id = $('.likeTypeAction');
var reactionType=$(this).attr("data-reaction");
var reactionName=$(this).attr("original-title");
var rel=$(this).parent().parent().attr("rel");
var x=$(this).parent().parent().attr("id");
var sid=x.split("reaction");
var id_post =sid[1];
var htmlData='<i class="'+reactionName.toLowerCase()+'IconSmall likeTypeSmall" ></i>'+reactionName;
var dataString = 'id_post='+ id_post +'&rid='+reactionType;
displayReaction(id_post);
/*
$.ajax({
url: 'ajaxReaction',
type: "post",
data: {"done":1, "id_post":id_post, "rid":reactionType},
beforeSend: function(){alert(id_post);},
success: function(data){
},
});*/
});
function displayReaction(id_post){
a = $("#reactionEmoji" + id_post);
var cls = $(this.a).parent().attr('class');
var n = cls.split("reaction");
var reactionNew = n[1];
$.ajax({
url: 'ajaxReaction',
type: "post",
data: {
"getReaction":1,"reactionNew":reactionNew
},
beforeSend: function(){
alert(reactionNew);
},
success: function(data){
}
})
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="reaction" class="reaction1">
<div id="reactionEmoji1">nothing</div>
<div class="reaction-action">
<div rel="unlike" c="undefined" id="reaction1" class="likeDiv">
<div class="tooltipster-content">
<span class="likeTypeAction" original-title="Like" data-reaction="1">
<i class="likeIcon likeType">like</i>
</span>
<span class="likeTypeAction" original-title="Amei" data-reaction="2">
<i class="ameiIcon likeType">Amei</i>
</span>
<span class="likeTypeAction" original-title="Haha" data-reaction="3">
<i class="hahaIcon likeType">Haha</i>
</span>
<span class="likeTypeAction" original-title="Uau" data-reaction="4">
<i class="uauIcon likeType">Uau</i>
</span>
<span class="likeTypeAction" original-title="Triste" data-reaction="5">
<i class="tristeIcon likeType">Triste</i>
</span>
<span class="likeTypeAction last" original-title="Grr" data-reaction="6">
<i class="grrIcon likeType">Grr</i>
</span>
</div>
<div class="tooltipster-arrow-top tooltipster-arrow" style="">
<span class="tooltipster-arrow-border" style="margin-bottom: -1px; border-color: rgb(222, 222, 222);;"/>
<span style="border-color:rgb(255, 255, 255);"/>
</div>
</div>
</div>
</div>
<div id="reaction" class="reaction2">
<div id="reactionEmoji2">nothing</div>
<div class="reaction-action">
<div rel="unlike" c="undefined" id="reaction2" class="likeDiv">
<div class="tooltipster-content">
<span class="likeTypeAction" original-title="Like" data-reaction="1">
<i class="likeIcon likeType">like</i>
</span>
<span class="likeTypeAction" original-title="Amei" data-reaction="2">
<i class="ameiIcon likeType">Amei</i>
</span>
<span class="likeTypeAction" original-title="Haha" data-reaction="3">
<i class="hahaIcon likeType">Haha</i>
</span>
<span class="likeTypeAction" original-title="Uau" data-reaction="4">
<i class="uauIcon likeType">Uau</i>
</span>
<span class="likeTypeAction" original-title="Triste" data-reaction="5">
<i class="tristeIcon likeType">Triste</i>
</span>
<span class="likeTypeAction last" original-title="Grr" data-reaction="6">
<i class="grrIcon likeType">Grr</i>
</span>
</div>
<div class="tooltipster-arrow-top tooltipster-arrow" style="">
<span class="tooltipster-arrow-border" style="margin-bottom: -1px; border-color: rgb(222, 222, 222);;"/>
<span style="border-color:rgb(255, 255, 255);"/>
</div>
</div>
</div>
</div>
<div id="reaction" class="reaction3">
<div id="reactionEmoji3">nothing</div>
<div class="reaction-action">
<div rel="unlike" c="undefined" id="reaction3" class="likeDiv">
<div class="tooltipster-content">
<span class="likeTypeAction" original-title="Like" data-reaction="1">
<i class="likeIcon likeType">like</i>
</span>
<span class="likeTypeAction" original-title="Amei" data-reaction="2">
<i class="ameiIcon likeType">Amei</i>
</span>
<span class="likeTypeAction" original-title="Haha" data-reaction="3">
<i class="hahaIcon likeType">Haha</i>
</span>
<span class="likeTypeAction" original-title="Uau" data-reaction="4">
<i class="uauIcon likeType">Uau</i>
</span>
<span class="likeTypeAction" original-title="Triste" data-reaction="5">
<i class="tristeIcon likeType">Triste</i>
</span>
<span class="likeTypeAction last" original-title="Grr" data-reaction="6">
<i class="grrIcon likeType">Grr</i>
</span>
</div>
<div class="tooltipster-arrow-top tooltipster-arrow" style="">
<span class="tooltipster-arrow-border" style="margin-bottom: -1px; border-color: rgb(222, 222, 222);;"/>
<span style="border-color:rgb(255, 255, 255);"/>
</div>
</div>
</div>
</div>

Jquery, how can I bind data to div attributes dynamically?

I am trying to figure out how to organise and append html dynamically from Json.
the keys of the Json data are Image, id, link, ajaxlink. My html looks like this:
<div class="col s12 m6 l3">
<div class="card z-depth-4">
<div class="card-image waves-effect waves-block waves-light" style="height:350px">
<a href="#Url.Action("Movie", "Home", new { id ="", title = "", year="" })">
<img class="activat" src="">
</a>
</div>
<div class="card-content blue-grey darken-4">
<span class="card-title activator grey-text text-darken-1"><a class="a-title truncate" style="color:inherit">title</a><i class="material-icons right" onclick="loadDoc('id', 'ajax')">more_vert</i></span>
<p>Report broken link</p>
</div>
<div class="card-reveal blue-grey darken-4">
<span class="card-title grey-text text-darken-1 title-wrap"><i class="material-icons right">close</i></span>
<div id=""></div>
</div>
</div>
</div>
and my jquery is embarrassing
$(".tab a").click(function (e) {
var url = "";
var fillentry = $('#fillentry');
var test = $(e.target).text();
if (test === 'Top Viewed Today') {
var url = "http://topview-today";
} else if (test === 'Most Favorite') {
var url = "https://top-favorite";
} else if (test === 'Top Rating') {
var url = 'https://top-rating';
} else if(test === 'Top show'){
url = 'https://top-show';
}
else {
throw new Error('kill execution');
}
$.ajax({
url: '../../Home/tabcontent?=' + url,
type: "GET",
success: function (response) {
$.each($.parseJSON(response), function (i, item) {
fillentry.empty();
if (item.length) {
var fill1 = '<div class="card z- depth - 4" id="fill1">'+ '<div class="card-image waves-effect waves-block waves-light" style="height:350px">'+
'< a href= "#Url.Action("Movie", "Home", new { id ="", title = "", year="" })">' +
'<img class="activat" src="' + item.image + '">' +
'</a>'+
'</div >'
+ '<div class="card-content blue-grey darken-4">' +
'<span class="card-title activator grey-text text-darken-1">' + '<a class="a-title truncate" style="color:inherit">title</a>' + '<i class="material-icons right" onclick="loadDoc(' + item.id + ',' + item.ajax+ ')">more_vert</i>'+'</span>'
+'<p>'+'Report broken link'+'</p>'
+'</div>'+
'<div class="card-reveal blue-grey darken-4">'
+'<span class="card-title grey-text text-darken-1 title-wrap"><i class="material-icons right">close</i>'+'</span>'+
'<div id="">'+'</div>'+
'</div>' + '</div>';
fillentry.append(fill1);
}
});
I need to interate through the Json object and bind the data to the grid.