We Keep Coding

InnerHTML doesn't work - Advanced function

I'm beginner in JS. But, after many hours, i'm really close to the wanted result.
I declare my JS Function in head part
function getPrice(price) {
var tabPrice = price.split("");
var html = "";
var virguleIndex = null;
for (var index = 0; index < tabPrice.length; ++index) {
var priceNumber = tabPrice[index];
if (priceNumber == ',') {
virguleIndex = index;
html += "<span class='p-c'>" + priceNumber + "</span>";
} else if (priceNumber == '-') {
html += "<span class='p-d'>" + priceNumber + "</span>";
} else if (index > virguleIndex && virguleIndex != null) {
html += "<span class='p-" + priceNumber + " p-small'>" + priceNumber + "</span>";
} else {
html += "<span class='p-" + priceNumber + "'>" + priceNumber + "</span>";
}
}
var div = document.getElementsByClassName('price');
div[0].innerHTML = html;
}
and my div in body part
<div class="price"></div>
I made some test - And my function getPrice works perflectly
https://image.noelshack.com/fichiers/2018/02/4/1515663887-functionwork.jpg
Some, the only fail (I think) is that the innerHTML don't work and don't write de var html content in div class price.
I haven't idea yet after many (many) hours of looking.
Can you help me ?
Thanks in advance,
Ludovic

By going through your image it is clear your DOM is not ready. So Please call your function inside this Block.
(function() {
// your page initialization code here
// the DOM will be available here
//Call Your function inside this block. it will work ex. getPrice("100");
})();

Some news (I worked on this few hours), I check for the dom charging. I tried (thank for you answer) the call function / transpose the code and the end / forcing the function after the dom loading (with document.addEventListener("DOMContentLoaded", function(event) {)
Console log still working. But my div still empty :/
Thanks again !

why my for loop is infinite here

below is the js code for wikipedia search project. I am getting infinite for loop even though it had condition to stop repeating the loop. I am stuck in this problem.
$(document).ready(function() {
$('.enter').click(function() {
var srcv = $('#search').val(); //variable get the input value
//statement to check empty input
if (srcv == "") {
alert("enter something to search");
}
else {
$.getJSON('https://en.wikipedia.org/w/api.php?action=opensearch&search=' + srcv + '&format=json&limit=20&callback=?', function(json) {
$('.content').html("<p> <a href ='" + json[3][0] + "'target='_blank'>" + json[1][0] + "</a><br>" + json[2][0] + "</p>");
/*for loop to display the content of the json object*/
for (i = 1; i < 20; i++) {
$('p').append("<p><a href ='" + json[3][i] + "'target='_blank'>" + json[1][i] + "</a>" + json[2][i] + "</p>");
}
});
}
});
});

You are appending to each and every one of <p> in page.
Since your for loop appends even more <p> (and you possibly have a high number of <p> elements in your page beforehand) you overflow your call stack.
You probably wanted to append to a specific <p>. Try giving an id to your selector.

from what i can see in the url you need to do the following:
loop over the terms found and select the link based on the index of the element, chose a single element .contentto append the data not a set of elements p, this will increase the number of duplicated results
$.getJSON('https://en.wikipedia.org/w/api.php?action=opensearch&search='+srcv+'&format=json&limit=20&callback=?', function(json){
$.each(json[1],function(i,v){
$('.content').append("<p><a href ='"+json[2][i]+"'target='_blank'>"+json[0]+"</a>"+v+"</p>");
});
});
see demo: https://jsfiddle.net/x79zzp5a/

Try this
$(document).ready(function() {
$('.enter').click(function() {
var srcv = $('#search').val(); //variable get the input value
//statement to check empty input
if (srcv == "") {
alert("enter something to search");
}
else {
$.getJSON('https://en.wikipedia.org/w/api.php?action=opensearch&search=' + srcv + '&format=json&limit=20&callback=?', function(json) {
$('.content').html("<p> <a href ='" + json[3][0] + "'target='_blank'>" + json[1][0] + "</a><br>" + json[2][0] + "</p>");
/*for loop to display the content of the json object*/
var i = 1;
for (i; i < 20; i++) {
$('p').append("<p><a href ='" + json[3][i] + "'target='_blank'>" + json[1][i] + "</a>" + json[2][i] + "</p>");
}
});
}
});
});

Javascript - Uncaught TypeError: Cannot read property 'value' of undefined

I am currently converting my friends website, as it's not "mobile friendly" by changing his current frontend into a bootstrap front end.
I've been working on a test site which is just a sub-domain on the same server.
This is the old website: http://bit.ly/1hurTNB
This is the new website: http://bit.ly/1hus0IV
But I've encountered a problem with the shopping cart page.
The shopping cart no longer recalculates its total when I press the recalculate button. It works fine on the old website. I dont know what I've changed to break it?
I've debugged the JavaScript using Chrome Dev Tools (F12) and line no 150 of order.php has this error:
Uncaught TypeError: Cannot read property 'value' of undefined
And this is the line of offending code:
if (document.forms[1].elements["qty" + count].value == "" ||
document.forms[1].elements["qty" + count].value == 0) {
document.forms[1].elements["qty" + count].value = 0;
showInCart = false;
}
I don't understand why I am getting this error? Googling around gives vague answers. Which is why I am here on StackOverflow.
BTW if you want to recreate my problem you'll need to:
go to the homepage
choose a product category from the grid of pictures e.g. "get costume ideas..."
add an item to the basket.
once the page posts to Order.php Change its Quantity.
click the recalculate button.
Why is the Javascript no longer picking up the values from the quantity fields???
Any help is greatly appreciated.
Here is the function in its entirety:
<script type="text/javascript">
function recalculateTotal(){
var lineTotal = 0;
var subTotal = 0;
var total = 0;
var hiddenStuff = "";
var count;
var i;
var orderURL="register.php?orderDetails=";
items = new Array(<?=$itemList?>);
for (i in items){
var cNum = 0;
var pNum = 0;
var qNum = 0;
count = items[i];
cNum = (count * 4) + 1;
var showInCart = true;
// the next line is broken!
if (document.forms[1].elements["qty" + count].value == "" || document.forms[1].elements["qty" + count].value == 0){
document.forms[1].elements["qty" + count].value = 0;
showInCart = false;
}
lineTotal = document.forms[1].elements["qty" + count].value * document.forms[1].elements["price" + count].value;
document.getElementById("lTotal" + count).innerHTML = formatCurrency(lineTotal);
subTotal += lineTotal;
if (hiddenStuff == ""){
hiddenStuff = hiddenStuff + showInCart + ":" + document.forms[1].elements["productId" + count].value + ':' + document.forms[1].elements["qty" + count].value;
}else{
hiddenStuff = hiddenStuff + ":" + showInCart + ":" + document.forms[1].elements["productId" + count].value + ':' + document.forms[1].elements["qty" + count].value;
}
}
document.getElementById("subTotal").innerHTML = formatCurrency(subTotal);
for (var j in delivery_prices){
if (subTotal >= delivery_prices[j].total_amount_start && subTotal <= delivery_prices[j].total_amount_end){
document.getElementById('delivery').innerHTML = delivery_prices[j].delivery_price;
total = subTotal + delivery_prices[j].delivery_price;
}
}
document.getElementById("total").innerHTML = formatCurrency(total);
document.forms[1].elements["orderDetails"].value = hiddenStuff;
orderURL = orderURL + hiddenStuff;
var myrequest = $.ajax({
url: orderURL,
type: "get",
});
myrequest.done(function (response){
updateBasket();
});
}
</script>
Thanks very much.

This error arises when the elements are not either declared or not loaded on the DOM. You can do these things to solve this problem :
1.Wrap every thing inside a function and attach it to the window.onload. Like this :
<script type = "text/javascript">
function foo(){
.....//Your JavaScript code here
}
window.onload = foo;
</script>
Check whether all the elements are present in the HTML page or not.
I am not sure that this is the problem, but I think its worth mentioning. Change the line no.150 to :
if (document.forms[0].elements["qty" + count].value == "" ||
document.forms[0].elements["qty" + count].value == 0) {
document.forms[0].elements["qty" + count].value = 0;
showInCart = false;
}
In the above code snippet I've changed the occurrence of 1 with 0. Because JavaScript starts counting from 0 not 1. So if you want to access the content of first form then use this point otherwise ignore this point.

You'll solve the problem changing
document.forms[1] into document.forms[0]
The problem is that the position of the form has changed. Put forms[0] and it will work.
Aitor

The problem is that document.forms[1] points to the form that has no qty0 element. Actually it points to your "search form". "Order form" has 0 index in the array provided by document.forms selection.
The form selection made with document.forms has ascending order. In resulted zero-based array, "0" index will point to first form, "1" index to second etc. On your old website, "search form" is rendered before "order form". That is why it works there, in its turn, on your new site the forms are switched so indexes should be changed too.

You already have a variable that you can use.
Replace :
if (document.forms[1].elements["qty" + count].value == "" ||
document.forms[1].elements["qty" + count].value == 0) {
document.forms[1].elements["qty" + count].value = 0;
showInCart = false;
}
By :
if (document.forms[1].elements["qty" + i].value == "" ||
document.forms[1].elements["qty" + i].value == 0) {
document.forms[1].elements["qty" + i].value = 0;
showInCart = false;
}

jQuery - why do 2 elements get appended when I click an icon

I've created a JSfiddle here:
basically I have a form that will allow users to input additional sections... but when I have added more than 2 units and then proceed to click on the 'plus' (+) icon I get more than 1 element created in that section... its probably something elementary, but any info will help.

Move your Click functions out of the click function
//add unit input box and increment click counter by one.
addUnit.click(function () {
unitCounter += 1;
unitElementCount = jQuery(".unit-element").length;
if (unitCounter <= 4) {
error.hide();
container.append('<table id="unit-' + unitCounter + '-div" class="create-course-table-element unit-element"><tr><td><label class="unit-label">Unit ' + unitCounter + '</label></td><td><input class="create-course-input-element unit-input" id="unit-id-' + unitCounter + '" name="unit-' + unitCounter + '" /><div id="delete-unit-' + unitCounter + '" class="ui-icon ui-icon-circle-close del-unit" title="Delete unit"></div></td></tr><tr><td align="center">Sections</td><td><div id="add-section-icon-' + unitCounter + '" class="ui-icon ui-icon-plus add-section-icon"></div></td></tr></table><div id="section-id-' + unitCounter + '-div" class="this-section"></div>');
} else if (unitElementCount == 4) {
unitCounter = 5;
error.html("");
error.fadeIn(1500);
error.append("<p class='error-message'>Note: You are only able to add 4 units to a given course. Each unit allows you to add 10 separate sections of content; therefore you may add a total of 40 different sections to a given course. If the material requires more units, you should consider dividing the course into 2 parts.</p>");
}
});
//This part has been slightly modified and moved out of the addUnit.click() function
var counterSecTwo = 0;
var counterSecThree = 0;
var counterSecFour = 0;
jQuery(document).on("click", "#add-section-icon-2",function () {
counterSecTwo += 1;
var container = jQuery("#section-id-2-div");
container.append("<p>test "+counterSecTwo+"</p>");
});
jQuery(document).on("click", "#add-section-icon-3",function () {
counterSecThree += 1;
var container = jQuery("#section-id-3-div");
container.append("<p>test "+counterSecThree+"</p>");
});
jQuery(document).on("click", "#add-section-icon-4",function () {
counterSecFour += 1;
var container = jQuery("#section-id-4-div");
container.append("<p>test "+counterSecFour+"</p>");
});
});
Here I am binding the click handlers to Document as the elements do not exist yet: you could also add the event listener when you create the actual element.
Modified fiddle: http://jsfiddle.net/vewP7/

Jquery help needed- infinite loop?

i have a problem with this code:
var par = [];
$('a[name]').each(function() {
if (($(this).attr('name')).indexOf("searchword") == -1) {
par.push($(this).attr('name'));
$('.content').empty();
for (var i = 0; i < par.length; i++) {
$(".content").append('<a id="par" href="#' + par[i] + '">' + par[i] + '</a><br />');
}
}
});
It causes ie and firefox to popup the warning window "Stop running this script". But it happens only when there is a very very large amount of data on page. Any ideas how to fix it?

Your code should look like this:
var par = [];
$('a[name]').each(function() {
if (($(this).attr('name')).indexOf("searchword") == -1) {
par.push($(this).attr('name'));
}
});
$('.content').empty();
for (var i = 0; i < par.length; i++) {
$(".content").append('<a id="par" href="#' + par[i] + '">' + par[i] + '</a><br />');
}
There is no reason for the second loop to be inside the first - that will just cause a lot of unneeded work.
You can make this code a bit simpler by removing the par array and the second loop, and just creating the content inside the first loop:
$('.content').empty();
$('a[name]').each(function() {
var name = $(this).attr('name');
if (name.indexOf("searchword") == -1) {
$(".content").append('<a id="par" href="#' + name + '">' + name + '</a><br />');
}
});

Browsers run all javascript (and most page interaction) on a single thread. When you run a long loop like this with no interruptions, the UI is totally frozen. You should try to make your algorithm have to do less, but in case that's not possible you can use this trick where you do a bit of work, then pause and give the browser control of the UI thread for a bit, then do more work.
var $targets = $('a[name]');
var current = 0;
var i = 0;
function doSomeWork() {
if (i == $targets.length) return;
var $t = $targets[i];
if (($t.attr('name')).indexOf("searchword") == -1) {
par.push($t.attr('name'));
$('.content').empty();
for (var i = 0; i < par.length; i++) {
$(".content").append('<a id="par" href="#' + par[i] + '">' + par[i] + '</a><br />');
}
}
i++;
window.setTimeout(arguments.callee, 0);
}
This does one iteration of your loop in a function before yielding. It might be a good idea to do more than just one in a function call, but you can experiment with that. An article on this idea: http://www.julienlecomte.net/blog/2007/10/28/