(See below for [SOLVED] explanation)
Hello, I’m stuck on loading verses in Poe’s Conqueror Worm server request exercise on the Fetching Data page.
Worked through it like three times and I’m clearly not placing things in the correct spot. I believe I’m unclear on the instructions when it says something like “Add the following below your previous lines:”. Does that mean add “the following” within the most recently edited function’s curly braces or below ALL of my previous lines?
const verseChoose = document.querySelector('select');
const poemDisplay = document.querySelector('pre');
verseChoose.onchange = function() {
const verse = verseChoose.value;
updateDisplay(verse);
};
function updateDisplay(verse) {
verse = verse.replace(" ", "");
verse = verse.toLowerCase();
let url = verse + '.txt';
};
let request = new XMLHttpRequest();
request.open('GET', url);
request.responseType = 'text';
request.onload = function() {
poemDisplay.textContent = request.response;
};
request.send();
updateDisplay('Verse 1');
verseChoose.value = 'Verse 1';
With the above, Dev Console states “Uncaught ReferenceError: url is not defined” and is referring to request.open('GET', url);
. To me, this means the declaration of url only exists inside the updateDisplay function, so I moved let request lines and request.onload() inside updateDisplay(). This removes console errors, but the verses still don’t appear.
What am I doing wrong?
Once I get this fixed, I’m happy to help re-write some of the instructions for more clarity.
[SOLVED]
-
Adjusted the location of a few lines to this:
function updateDisplay(verse) { verse = verse.replace(" ", ""); verse = verse.toLowerCase(); var url = verse + '.txt'; var request = new XMLHttpRequest(); request.open('GET', url); request.responseType = 'text'; request.onload = function() { poemDisplay.textContent = request.response; }; request.send(); };
-
Didn’t read far enough, “Modern browsers will not run XHR requests if you just run the example from a local file.” Since I use Atom text editor, I used the atom-live-server-plus package and ran it through there. It worked.
I’d still be happy to review the section and see if I can write the instructions to be more specific.