Develop Reference

TypeError: Cannot read property 'innerText' of undefined - Deleting from eshop

I need to get help here.
I'm working on my eshop. All is working fine except removing a object from the cart. When I do it, the price is not changed. And in the console it's written:
"Uncaught TypeError: Cannot read property 'innerText' of undefined at updateCelkoveCeny (Eshop.js:86)
That 86 row is the row with parseFloat(). Any suggestions?
function updateCelkoveCeny() {
var produktyKosikContainer = document.getElementsByClassName('kosik-produkty')[0]
var radkyKosik = produktyKosikContainer.getElementsByClassName('kosik-radek')
var celkovaCena = 0
for (var i = 0; i < radkyKosik.length; i++) {
var radekKosik = radkyKosik[i]
var cenaElement = radekKosik.getElementsByClassName('kosik-cena')[0]
var pocetElement = radekKosik.getElementsByClassName('kosik-pocet-input')[0]
var cena = parseFloat(cenaElement.innerText.replace(',-', ''))
var pocet = pocetElement.value
celkovaCena = celkovaCena + (cena * pocet)
}
document.getElementsByClassName('kosik-celkem-cena')[0].innerText = celkovaCena + ",-"
}
Edit: This is element, which i add, if user want to add a new product to cart.
function pridejPoKliknutiDoKosiku(event) {
var button = event.target
var produkt = button.parentElement.parentElement
var nazevProduktu = produkt.getElementsByClassName('eshop-nazev-produktu')[0].innerText
var cena = produkt.getElementsByClassName('eshop-cena-produktu')[0].innerText
var zdrojObrazku = produkt.getElementsByClassName('eshop-fotka-produktu')[0].src
pridejProduktDoKosiku(nazevProduktu, cena, zdrojObrazku)
updateCelkoveCeny()
}
function pridejProduktDoKosiku(nazevProduktu, cena, zdrojObrazku) {
var radekKosik = document.createElement('div')
radekKosik.classList.add('kosik-radek')
var kosikProdukty = document.getElementsByClassName('kosik-produkty')[0]
var NazvyProduktu = kosikProdukty.getElementsByClassName('kosik-nazev-produktu')
for (var i = 0; i < NazvyProduktu.length; i++) {
if (NazvyProduktu[i].innerText == nazevProduktu) {
alert("Tento produkt je již obsažen v košíku.")
return
}
}
var radekKosikKontent = `
<div class="kosik-radek">
<div class="kosik-produktu kosik-sloupec">
<img class="kosik-fotka-produktu" src="${zdrojObrazku}" width="100" height="100"><br>
<span class="kosik-nazev-produktu">${nazevProduktu}</span>
</div>
<span class="kosik-cena kosik-sloupec">${cena}</span>
<div class="kosik-pocet kosik-sloupec">
<input class="kosik-pocet-input" type="number" value="1" min="1">
<button class="button-remove" type="button">Odstranit</button>
</div>
</div><br><br>`
radekKosik.innerHTML = radekKosikKontent
kosikProdukty.append(radekKosik)
radekKosik.getElementsByClassName("button-remove")[0].addEventListener('click', odstranitProduktyVKosiku)
radekKosik.getElementsByClassName('kosik-pocet-input')[0].addEventListener('change', pocetZmenen)
}

Is there an element in your DOM that contains class 'kosik-cena'? If so, you could loop over the array to get the innerText. Most likely there is no element found with class 'kosik-cena'. This way it is not possible to get the innerText of an element that doesn't exist. It would be nice to give some insights into your HTML.
Get the innerText of an array of elements:
var cenaElement = document.getElementsByClassName("kosik-cena");
for (var i = 0; i < cenaElement.length; i++) {
var text = cenaElement[i].innerText;
console.log(text);
}

How to Change Color of Div within a for statement?

Inside my php while loop I output a div with id divborder, and class div-border
Inside that div i have another div with id title
<div id='divborder' class='div-border'>
<div id='Title'>This is Title</div> <br/> video elements
</div>
I have a JavaScript function that get called when the video ends
for (var i = 0; i < videos.length; i++) {
videos[i].addEventListener("ended", function(event)
{
var divBoader2 = document.getElementsByClassName("divborder")[3];
divBoader2.style.borderColor = "#b1ff99";
}
My Question is how do i change the border color of the div and the title of second div?
I can do it like this:
var divBoader2 = document.getElementsByClassName("divborder")[3];
divBoader2.style.borderColor = "#b1ff99";
which works but its not dynamic

Save the value of value at i in another variable declared with let
for (var i = 0; i < videos.length; i++) {
let index = i; //save the value as let so that its binding stays
videos[i].addEventListener("ended", function(event)
{
var divBoader = document.querySelectorAll("div-border")[index];
divBoader.style.borderColor = "#b1ff99";
}
}
Or if the video elements are within the div-border, then use closest
for (var i = 0; i < videos.length; i++) {
videos[i].addEventListener("ended", function(event)
{
var divBoader = event.currentTarget.closest(".div-border");
divBoader.style.borderColor = "#b1ff99";
}
}
A little less verbose code
[...videos].forEach( s => s.closest( ".div-border" ).style.color = "#b1ff99" )

Try this,
Give class name div-border instead of divborder
for (var i = 0; i < videos.length; i++) {
videos[i].addEventListener("ended", function(event)
{
var divBoader2 = document.getElementsByClassName("div-border")[3];
divBoader2.style.borderColor = "#b1ff99";
}

What you need is probably a videos[i].parentNode instead of document.getElementsByClassName("div-border")[3] (see https://developer.mozilla.org/en-US/docs/Web/API/Node/parentNode)

Looping through a set of <p>'s one at a time

I'm trying to figure out how to count the number of p's so every time the button is pressed, it outputs to 0 to 1 until the maximum number of p's is counted.
var big_number = 999999;
var i;
var a = document.getElementsByTagName("p");
function function0() {
for (i=0; i < big_number; i++) {
document.getElementsByTagName("p")[i].innerHTML="text";
}
}
I want it to write to another p every time the button is pressed.

document.getElementsByTagName("p").length // number of p elements on the page
Is that what you were asking?

Make a generic tag adder function then call it:
function addTags(tagName,start, max, container) {
var i = start;
for (i; i < max; i++) {
var newp = document.createElement(tagName);
newp.innerHTML = "paragraph" + i;
container.appendChild(newp);
}
}
var tag = 'p';
var big_number = 30;
var i;
var a = document.getElementsByTagName(tag );
// **THIS is your specific question answer**:
var pCount = a.length;
var parent = document.getElementById('mydiv');
addTags(tag,pCount , big_number, parent);
// add 10 more
a = document.getElementsByTagName(tag );
pCount = a.length;
big_number = big_number+10;
addTags(tag,pCount , big_number, parent);
EDIT:
NOTE: THIS might be better, only hitting the DOM once, up to you to determine need:
function addTagGroup(tagName, start, max, container) {
var tempContainer = document.createDocumentFragment();
var i = start;
for (i; i < max; i++) {
var el = document.createElement(tagName);
el.textContent = "Paragraph" + i;
tempContainer.appendChild(el);
}
container.appendChild(tempContainer);
}

To find out how many <p> elements there are in the document you should use DOM's length property as below :-
var numP = document.getElementsByTagName("P").length;
or
var div = document.getElementById("myDIV");
var numP = div.getElementsByTagName("P").length;
To get number of element inside a tag.

Get the source of images from table cell

I am trying to get to the img.src of these table cells, but am going wrong somewhere.
var cell = newTable.rows.cells;
var content = newTable.getElementsByTagName('img');
var nodeArray = [];
for(var i = 0; i < content.length; ++i)
{
nodeArray[i] = content[i];
}
var listThem = $(this).attr('src');
console.log(listThem);

Use this :
var content = newTable.getElementsByTagName('img');
for(var i = 0; i < content.length; i += 1) {
var source = content[i]['src'];
//do something
}
getElementsByTagName() returns an array of dom elements.
To access the "src" attribute of a dom element, you can do this : element.src or element['src'];
source will contain the image source.

How to point elements childrens with JavaScript

I have little problem with element childrens.
Heres some code to explain my question:
function check(element){
// I want to get custom attribute from element children.
// Children elements are always radio buttons
var temp = element. ?? .attr('temp');
return temp;
}
// element variable is the whole div here
<div id = "test">
<table>
<tr>
<td> <input type="radio" temp="somethinghere"/></td>
</tr>
</table>
</div>
Hope someone has ideas or even better.. solution.

I think you want something like this:
function check(element) {
var ret = [];
for (var i = 0; i < element.childNodes.length; i++) {
if (element.childNodes[i].type == 'radio') {
ret.push(element.childNodes[i].getAttribute('temp'));
}
}
return ret;
}
This will return an array containing all the temp attributes of the radio children of the element.

var temp = element.getAttribute('temp')
Or
var temp = element.temp = temp;
Or
var temp = element['temp'] = temp;
https://developer.mozilla.org/en/DOM/element.getAttribute
Edit: try:
var temp = '';
for (var i = 0; i < element.childNodes; i++)
temp += element.childNodes[i].getAttribute('temp');
return temp;
Is this what you're looking for?

To get an array of all the children of element :
element.childNodes;
To get an array of all input tags that are descendants of element :
element.getElementsByTagName("input")
Then loop through either of those arrays.

try this for the first child radio button
var temp = element.children(':radio:first').attr('temp');
of if you want all 'temp' attr from all child radio button do following:
var arrTemp = element.children(':radio').map(function(){
return $(this).attr('temp');
// or you can make it more detail like:
// return { ID: $(this).attr('id'), Temp: $(this).attr('temp') };
}).get();
UPDATE for table sample
var arrTemp = element.find(':radio').map(function(){
return $(this).attr('temp');
// or you can make it more detail like:
// return { ID: $(this).attr('id'), Temp: $(this).attr('temp') };
}).get();