Replace multiple hrefs within menu list with click event,
and load file content into div.
Consider:
<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<title>Read file into div</title>
<article>
<h1>My HTMl</h1>
<ul class = "mylist">
<li><a href="file1.html">Select file 1</a>
<li><a href="file2.html">Select file 2</a>
<li><a href="file2.html">Select file 2</a>
</ul>
<div id = "SelectedText">
<h1>Please find selected content below:</h1>
<p>Replace me
</div>
</article>
<!-- Local file -->
<p>file i contains for example:
<h1>Ipsum dolor sit amet</h1>
What I want to achive:
- Add an event listener to all hrefs in all the lists with class “mylist”.
- When a file is selected (on click) then replace the content of the div with id=”SelectedText” with the content of the chosen file.
I tried:
<a href="#" onclick="loadDoc('/file1.htm'); return false;">Nieuws</a>
with javascript function:
<script>
// Load external HTML document in div.
function loadDoc(x) {
.then((result) => {
if (result.status != 200) { throw new Error("Bad Server Response"); }
return result.text();
})
.then((content) => {
document.getElementById("content").innerHTML = content;
})
.catch((error) => { console.log(error); });
}
</script>
But I find a solution with event-handlers more elegant.
