I'd like to implement the functionality for live-editing of a HTML page. I have a HTML structure with h1 headings and text inside sections, and the .js file below. The user would need to select the section by its heading using the <select> and should then be able to change content and heading and submit/update the page. It's not necessary to make HTTP posts for submission. But the select-box names should update according to the new titles and also the sections should update according to the new/modified textarea-content.
So far it's working for the title, but I can't seem to figure out why its not working for the content and why the select-box option-names are not updated.
As can be seem in the code below, I'd like a pure JS solution using only simple variables and arrays and without modifying the HTML structure. I'd really apprechiate some help.
Thanks!
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>LiveEditor</title>
<script src="edit.js" defer="true"></script>
</head>
<body>
<div class="content">
<section>
<h1>Topic 1</h1>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
</section>
<section>
<h1>Topic 2</h1>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
</section>
<section>
<h1>Topic 3</h1>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
</section>
</div>
</body>
</html>
And to live edit the content od the headings and sections I have this Javascript edit.js:
function selectSection(e) {
document.getElementById('edit-title').value = e.target.value; //heading into textfield
for (var i = 0; i < sections.length; i++) { // find corresponding section for selected heading
if (sections[i].firstElementChild.innerHTML === e.target.value) {
document.getElementById('edit-sectionText').innerHTML = sections[i].innerHTML;
}
}
console.log('textarea-content= '+document.getElementById('edit-sectionText').innerHTML); // update textarea
document.getElementById('edit-submit').removeAttribute('disabled'); // activate submit button
}
function submitNewSectionContent(e) { // update HTML page content from edit form
for (var i = 0; i < sections.length; i++) { // find corresponding section for selected heading
if (sections[i].firstElementChild.innerHTML === document.getElementById('edit-chooseSection').value) {
let newHeading = document.getElementById('edit-title').value;
let newContent = document.getElementById('edit-sectionText').innerHTML;
if (newContent.indexOf('<h1>') > -1 && newContent.indexOf('<h1>') < 10) { // <h1> is at beginning so replace with newHeading
let toberemoved = newContent.match('<h1>.*<\/h1>');
newContent = newContent.replace(toberemoved[0], '').trim();
sections[i].innerHTML = '<h1>'+newHeading+'</h1>' + sections[i].innerHTML;
} else { // newContent has no h1 as first child, add h1 from newHeading
sections[i].innerHTML = '<h1>'+newHeading+'</h1>' + newContent;
}
}
}
}
function buildSelectionFromHeadings() {
let options = "";
for (let i = 0; i < sections.length; i++) {
options += "<option>" + sections[i].firstElementChild.innerHTML + "</option>";
}
return options;
}
let sections = document.getElementsByTagName('section');
if (sections) {
let insertPoint = document.querySelector('body');
insertPoint.appendChild(document.createElement('div'));
insertPoint.lastChild.innerHTML += '<form id="edit"><select id="edit-chooseSection">' + buildSelectionFromHeadings() + '</select><input type="text" name="edit-title" id="edit-title"></input><textarea name="edit-sectionText" id="edit-sectionText" rows="10" cols="50"></textarea><input type="button" name="edit-submit" id="edit-submit" value="Submit changes" disabled></input></form>';
}
let headings = document.querySelectorAll('.content h1');
for (let i = 0; i < headings.length; i++) {
headings[i].addEventListener('change', buildSelectionFromHeadings);
}
document.getElementById('edit-chooseSection').addEventListener('change', selectSection);
document.getElementById('edit-submit').addEventListener('click', submitNewSectionContent);
