I have a javascript function that generates some html content. However the event listener i’m using load the content at the end of the page.*I’d like it to be loaded in a specific div.
window.addEventListener("DOMContentLoaded", (event) => { createForm(<?php echo json_encode($training_array, JSON_PRETTY_PRINT) ?>); });
I also tried the onload attribute in the div … but stll doesn’t work:
<div id="bdd"onload="createForm(<?php echo json_encode($training_array, JSON_PRETTY_PRINT) ?>);"></div>
The createForm function:
function createForm(arr){ ct++; de++; na++; const form = document.getElementById("formed"); const divi = document.getElementById("bdd"); arr.forEach(element => { const a = element.training_diploma; const b = element.training_school; const c = element.training_level; const d = element.training_start_date; const e = element.training_end_date; const training_diploma = document.createElement('input'); training_diploma.setAttribute('value', a) training_diploma.setAttribute('name','saved_training['.concat(ct,'][training_diploma]')) training_diploma.required = true const training_school = document.createElement('input'); training_school.setAttribute('value', b) training_school.setAttribute('name','saved_training['.concat(ct,'][training_school]')) training_school.required = true const divSelect = document.createElement('div'); divSelect.setAttribute('class', 'select') const training_level = document.createElement('select'); training_level.setAttribute('value', c) training_level.setAttribute('id', 'rec_mode') training_level.setAttribute('name','saved_training['.concat(ct,'][training_level]')) training_level.required = true const option1 = document.createElement('option'); option1.disabled = true option1.innerHTML='-- Type de diplôme --'; const option2 = document.createElement('option'); option2.innerHTML='Formation' if (option2.innerHTML == c) { option2.selected = true } const option3 = document.createElement('option'); option3.innerHTML='Brevet' if (option3.innerHTML == c) { option3.selected = true } const option4 = document.createElement('option'); option4.innerHTML='Bac' if (option4.innerHTML == c) { option4.selected = true } const option5 = document.createElement('option'); option5.innerHTML='Bac +1' if (option5.innerHTML == c) { option5.selected = true } const option6 = document.createElement('option'); option6.innerHTML='Bac +2' if (option6.innerHTML == c) { option6.selected = true } const option7 = document.createElement('option'); option7.innerHTML='Bac +3' if (option7.innerHTML == c) { option7.selected = true } const option8 = document.createElement('option'); option8.innerHTML='Bac +4' if (option8.innerHTML == c) { option8.selected = true } const option9 = document.createElement('option'); option9.innerHTML='Bac +5' if (option9.innerHTML == c) { option9.selected = true } const option10 = document.createElement('option'); option10.innerHTML='Doctorat' if (option10.innerHTML == c) { option10.selected = true } const training_start_date = document.createElement('input'); training_start_date.setAttribute('type', 'month') training_start_date.setAttribute('value', d) training_start_date.setAttribute('name','saved_training['.concat(ct,'][training_start_date]')) training_start_date.required = true const training_end_date = document.createElement('input'); training_end_date.setAttribute('type', 'month') training_end_date.setAttribute('value', e) training_end_date.setAttribute('name','saved_training['.concat(ct,'][training_end_date]')) training_end_date.required = true const div = document.createElement('div'); div.setAttribute('id', 'row-'+ct++) div.setAttribute('class', 'training_container') const del = document.createElement('a'); del.setAttribute('href','javascript:removeSavedTraining('.concat(de++,')')) del.setAttribute('class','remove_button') del.innerHTML='- Supprimer cette formation' form.appendChild(divi); divi.appendChild(div); div.appendChild(training_diploma); div.appendChild(training_school); div.appendChild(divSelect); divSelect.appendChild(training_level); training_level.appendChild(option1); training_level.appendChild(option2); training_level.appendChild(option3); training_level.appendChild(option4); training_level.appendChild(option5); training_level.appendChild(option6); training_level.appendChild(option7); training_level.appendChild(option8); training_level.appendChild(option9); training_level.appendChild(option10); div.appendChild(training_start_date); div.appendChild(training_end_date); div.appendChild(del); }); } window.addEventListener("DOMContentLoaded", (event) => { createForm(<?php echo json_encode($training_array, JSON_PRETTY_PRINT) ?>); });
Any idea ? Thanks a lot from France !
Advertisement
Answer
Found the answer !
basically, as everyone said, a “return” was missing ! Just needed to figure out where to place !
function createForm(arr){ ct++; de++; na++; const form = document.getElementById("formed"); const divi = document.getElementById("bdd"); arr.forEach(element => { const a = element.training_diploma; const b = element.training_school; const c = element.training_level; const d = element.training_start_date; const e = element.training_end_date; const training_diploma = document.createElement('input'); training_diploma.setAttribute('value', a) training_diploma.setAttribute('name','saved_training['.concat(ct,'][training_diploma]')) training_diploma.required = true const training_school = document.createElement('input'); training_school.setAttribute('value', b) training_school.setAttribute('name','saved_training['.concat(ct,'][training_school]')) training_school.required = true const divSelect = document.createElement('div'); divSelect.setAttribute('class', 'select') const training_level = document.createElement('select'); training_level.setAttribute('value', c) training_level.setAttribute('id', 'rec_mode') training_level.setAttribute('name','saved_training['.concat(ct,'][training_level]')) training_level.required = true const option1 = document.createElement('option'); option1.disabled = true option1.innerHTML='-- Type de diplôme --'; const option2 = document.createElement('option'); option2.innerHTML='Formation' if (option2.innerHTML == c) { option2.selected = true } const option3 = document.createElement('option'); option3.innerHTML='Brevet' if (option3.innerHTML == c) { option3.selected = true } const option4 = document.createElement('option'); option4.innerHTML='Bac' if (option4.innerHTML == c) { option4.selected = true } const option5 = document.createElement('option'); option5.innerHTML='Bac +1' if (option5.innerHTML == c) { option5.selected = true } const option6 = document.createElement('option'); option6.innerHTML='Bac +2' if (option6.innerHTML == c) { option6.selected = true } const option7 = document.createElement('option'); option7.innerHTML='Bac +3' if (option7.innerHTML == c) { option7.selected = true } const option8 = document.createElement('option'); option8.innerHTML='Bac +4' if (option8.innerHTML == c) { option8.selected = true } const option9 = document.createElement('option'); option9.innerHTML='Bac +5' if (option9.innerHTML == c) { option9.selected = true } const option10 = document.createElement('option'); option10.innerHTML='Doctorat' if (option10.innerHTML == c) { option10.selected = true } const training_start_date = document.createElement('input'); training_start_date.setAttribute('type', 'month') training_start_date.setAttribute('value', d) training_start_date.setAttribute('name','saved_training['.concat(ct,'][training_start_date]')) training_start_date.required = true const training_end_date = document.createElement('input'); training_end_date.setAttribute('type', 'month') training_end_date.setAttribute('value', e) training_end_date.setAttribute('name','saved_training['.concat(ct,'][training_end_date]')) training_end_date.required = true const div = document.createElement('div'); div.setAttribute('id', 'row-'+ct++) div.setAttribute('class', 'training_container') const del = document.createElement('a'); del.setAttribute('href','javascript:removeSavedTraining('.concat(de++,')')) del.setAttribute('class','remove_button') del.innerHTML='- Supprimer cette formation' form.appendChild(divi); divi.appendChild(div); div.appendChild(training_diploma); div.appendChild(training_school); div.appendChild(divSelect); divSelect.appendChild(training_level); training_level.appendChild(option1); training_level.appendChild(option2); training_level.appendChild(option3); training_level.appendChild(option4); training_level.appendChild(option5); training_level.appendChild(option6); training_level.appendChild(option7); training_level.appendChild(option8); training_level.appendChild(option9); training_level.appendChild(option10); div.appendChild(training_start_date); div.appendChild(training_end_date); div.appendChild(del); }); return divi; } window.addEventListener("DOMContentLoaded", (event) => { document.getElementById("training").appendChild(createForm(<?php echo json_encode($training_array, JSON_PRETTY_PRINT) ?>)); });