tacoshy
Reputation: 13002
forEach does not apply to dynamically generated elements
I'm very sorry in advance to post nearly 170 lines of JS code but cutting it down does not replicate the issue at all. The issue must be somewhere within this JS code.
I generate content through arrays/objects. This works absolutely fine. However, I cannot use forEach to manipulate the content of spans even though they should be part of the DOM tree.
What am I missing here?
var language = document.documentElement.lang.toLowerCase();
/* ----- locailization_database.js ----- */
var DB_localization = [
/* content */
[
[
'DB_localization/content/text-block-2a',
document.querySelector('#text-block-2'),
'text',
{
de: `In Deutschland gibt es noch keine Gesetze, die artgerechte Haltung
vorschreiben. Dennoch gibt es Richtlinien, nach welchen auch einige
Veterinärämter handeln.`,
us: 'not localized',
en: 'not localized'
}
],
[
'DB_localization/content/text-block-2b',
document.querySelector('#text-block-2'),
'tag',
{
de: '',
us: '',
en: ''
},
'br',
''
],
[
'DB_localization/content/text-block-2c',
document.querySelector('#text-block-2'),
'text',
{
de: `Die Tierärztliche Vereinigung für Tierschutz e.V. (TVT), das
Bundesministerium für Ernährung und Landwirtschaft (BMEL) sowie der
Sachkundenachweis für Kleinsäuger nach §11 Tierschutzgesetz, empfehlen ein
Gehegemaß für alle Hamsterarten ab `
/*<span class="minimum-surface-area"></span>
<span class="unit-lenght"></span>. */
,
us: 'not localized',
en: 'not localized'
}
],
[
'DB_localization/content/text-block-2d',
document.querySelector('#text-block-2'),
'tag',
{
de: '',
us: '',
en: ''
},
'span',
'minimum-surface-area'
],
[
'DB_localization/content/text-block-2e',
document.querySelector('#text-block-2'),
'tag',
{
de: '',
us: '',
en: ''
},
'span',
'unit-lenght'
]
],
/* measurement units */
[
[
'DB_localization/units/lenght',
document.querySelectorAll('.unit-lenght'),
{
de: 'cm',
us: 'in',
en: 'cm'
}
],
[
'DB_localization/units/surface-area-A',
document.querySelectorAll('.unit-surface-area-A'),
{
de: 'm²',
us: 'not localized',
en: 'm²'
}
],
[
'DB_localization/units/surface-area-B',
document.querySelectorAll('.unit-surface-area-B'),
{
de: 'cm²',
us: 'ft²',
en: 'cm²'
}
],
[
'DB_localization/units/factor',
document.querySelectorAll('.unit-factor'),
{
de: 'x',
us: 'x',
en: 'x'
}
],
[
'DB_localization/units/minimum-surface-area',
document.querySelectorAll('.minimum-surface-area'),
{
de: '100x50',
us: '32x18',
en: '100x50'
}
],
]
];
/* ----- localization.js ----- */
window.addEventListener('load', function() {
/* loading unique elements */
for (let i = 0; i < DB_localization[0].length; i++) {
let DB_array_element = DB_localization[0][i][1],
DB_array_type = DB_localization[0][i][2],
DB_array_value = DB_localization[0][i][3][language];
if (typeof DB_array_element !== 'undefined' &&
typeof DB_array_type !== 'undefined' &&
typeof DB_array_value !== 'undefined') {
if (DB_array_type == 'text') {
DB_array_element.insertAdjacentHTML('beforeend', DB_array_value);
}
if (DB_array_type == 'tag') {
let DB_array_tag = DB_localization[0][i][4],
DB_array_class = DB_localization[0][i][5];
let new_ele = document.createElement(DB_array_tag);
DB_array_element.appendChild(new_ele);
if (DB_array_class !== '') {
new_ele.setAttribute('class', DB_array_class);
}
}
array_path = DB_localization[0][i][0];
} else {
}
if (i + 1 === DB_localization[0].length) {
apply_units();
}
}
});
function apply_units() {
/* applying the correct measurement units */
for (let i = 0; i < DB_localization[1].length; i++) {
let DB_array_element = DB_localization[1][i][1],
DB_array_value = DB_localization[1][i][2][language];
if (typeof DB_array_value !== 'undefined' &&
typeof DB_array_element !== 'undefined') {
DB_array_element.forEach(el => el.insertAdjacentHTML('beforeend', DB_array_value));
array_path = DB_localization[1][i][0];
} else {
}
}
}<!DOCTYPE html>
<html lang="de" dir="ltr">
<head>
<meta charset="utf-8">
<title>Einstreu-Rechner</title>
</head>
<body>
<main class="py-l px-xl mx-auto mt-xl">
<!-- ----- Section: Title ----- -->
<h1 id="title"></h1>
<!-- ----- Section: Description ----- -->
<section id="description" title="Beschreibung über die Richtlininen des deutschen Standards">
<p class="text-align-justify" id="text-block-1"></p>
<p class="text-align-justify" id="text-block-2"></p>
<h3 class="text-align-center" id="sub-title-1"></h3>
<p class="text-align-center text-color-red" id="text-block-3"></p>
<h4 class="text-align-center" id="sub-title-2"></h4>
</section>
<!-- More Content -->
<p>This span works:</p>
<span class="unit-lenght"><span>Upvotes: 0
Views: 110
Answers (1)
Barmar
Reputation: 781068
document.querySelectorAll('.unit-lenght') doesn't update when the DOM changes. Instead of calling querySelectorAll() when creating the array, put the selector in the DB_localization array and call querySelectorAll() when calling forEach().
var language = document.documentElement.lang.toLowerCase();
/* ----- locailization_database.js ----- */
var DB_localization = [
/* content */
[
[
'DB_localization/content/text-block-2a',
document.querySelector('#text-block-2'),
'text',
{
de: `In Deutschland gibt es noch keine Gesetze, die artgerechte Haltung
vorschreiben. Dennoch gibt es Richtlinien, nach welchen auch einige
Veterinärämter handeln.`,
us: 'not localized',
en: 'not localized'
}
],
[
'DB_localization/content/text-block-2b',
document.querySelector('#text-block-2'),
'tag',
{
de: '',
us: '',
en: ''
},
'br',
''
],
[
'DB_localization/content/text-block-2c',
document.querySelector('#text-block-2'),
'text',
{
de: `Die Tierärztliche Vereinigung für Tierschutz e.V. (TVT), das
Bundesministerium für Ernährung und Landwirtschaft (BMEL) sowie der
Sachkundenachweis für Kleinsäuger nach §11 Tierschutzgesetz, empfehlen ein
Gehegemaß für alle Hamsterarten ab `
/*<span class="minimum-surface-area"></span>
<span class="unit-lenght"></span>. */
,
us: 'not localized',
en: 'not localized'
}
],
[
'DB_localization/content/text-block-2d',
document.querySelector('#text-block-2'),
'tag',
{
de: '',
us: '',
en: ''
},
'span',
'minimum-surface-area'
],
[
'DB_localization/content/text-block-2e',
document.querySelector('#text-block-2'),
'tag',
{
de: '',
us: '',
en: ''
},
'span',
'unit-lenght'
]
],
/* measurement units */
[
[
'DB_localization/units/lenght',
'.unit-lenght',
{
de: 'cm',
us: 'in',
en: 'cm'
}
],
[
'DB_localization/units/surface-area-A',
'.unit-surface-area-A',
{
de: 'm²',
us: 'not localized',
en: 'm²'
}
],
[
'DB_localization/units/surface-area-B',
'.unit-surface-area-B',
{
de: 'cm²',
us: 'ft²',
en: 'cm²'
}
],
[
'DB_localization/units/factor',
'.unit-factor',
{
de: 'x',
us: 'x',
en: 'x'
}
],
[
'DB_localization/units/minimum-surface-area',
'.minimum-surface-area',
{
de: '100x50',
us: '32x18',
en: '100x50'
}
],
]
];
/* ----- localization.js ----- */
window.addEventListener('load', function() {
/* loading unique elements */
for (let i = 0; i < DB_localization[0].length; i++) {
let DB_array_element = DB_localization[0][i][1],
DB_array_type = DB_localization[0][i][2],
DB_array_value = DB_localization[0][i][3][language];
if (typeof DB_array_element !== 'undefined' &&
typeof DB_array_type !== 'undefined' &&
typeof DB_array_value !== 'undefined') {
if (DB_array_type == 'text') {
DB_array_element.insertAdjacentHTML('beforeend', DB_array_value);
}
if (DB_array_type == 'tag') {
let DB_array_tag = DB_localization[0][i][4],
DB_array_class = DB_localization[0][i][5];
let new_ele = document.createElement(DB_array_tag);
DB_array_element.appendChild(new_ele);
if (DB_array_class !== '') {
new_ele.setAttribute('class', DB_array_class);
}
}
array_path = DB_localization[0][i][0];
} else {
}
if (i + 1 === DB_localization[0].length) {
apply_units();
}
}
});
function apply_units() {
/* applying the correct measurement units */
for (let i = 0; i < DB_localization[1].length; i++) {
let DB_array_element = document.querySelectorAll(DB_localization[1][i][1]),
DB_array_value = DB_localization[1][i][2][language];
if (typeof DB_array_value !== 'undefined' &&
typeof DB_array_element !== 'undefined') {
DB_array_element.forEach(el => el.insertAdjacentHTML('beforeend', DB_array_value));
array_path = DB_localization[1][i][0];
} else {
}
}
}<!DOCTYPE html>
<html lang="de" dir="ltr">
<head>
<meta charset="utf-8">
<title>Einstreu-Rechner</title>
</head>
<body>
<main class="py-l px-xl mx-auto mt-xl">
<!-- ----- Section: Title ----- -->
<h1 id="title"></h1>
<!-- ----- Section: Description ----- -->
<section id="description" title="Beschreibung über die Richtlininen des deutschen Standards">
<p class="text-align-justify" id="text-block-1"></p>
<p class="text-align-justify" id="text-block-2"></p>
<h3 class="text-align-center" id="sub-title-1"></h3>
<p class="text-align-center text-color-red" id="text-block-3"></p>
<h4 class="text-align-center" id="sub-title-2"></h4>
</section>
<!-- More Content -->
<p>This span works:</p>
<span class="unit-lenght"><span>Upvotes: 1
Related Questions
- forEach only uses first element
- nested forEach not working with append HTML
- javascript foreach with DOM
- foreach doesn't work with array created by getElementsByTagName
- javascript append from foreach loop not working
- Creating dynamic DOM element using for loop
- How to use forEach to populate HTML elements
- foreach loop JavaScript does not work
- Dynamically creating elements and adding onclick event not working
- Jquery Looping through elements created at runtime