JavaScript Displaying the Content

Stan Byford
Stan Byford
9,387 Points

I have been having nothing but problems since fetch was introduced in the last module

Since fetch was introduced in the last module code doesn't seem to work at all, I have had syntax errors and now string literal contains an unescaped line break. I have gone over the code a couple of times but cannot see a problem.

const select = document.getElementById('breeds'); const card = document.querySelector('.card'); const form = document.querySelector('form');

// ------------------------------------------ // FETCH FUNCTIONS // ------------------------------------------ fetch('https://dog.ceo/api/breeds/image/random') .then(response => response.json()) .then(data => generateImage(data.message))

// ------------------------------------------ // HELPER FUNCTIONS // ------------------------------------------

function generateImage(data) { const html = ' <img src='${data}' alt> <p>Click to view images of ${select.value}s</p> '; card.innerHTML = html; }

// ------------------------------------------ // EVENT LISTENERS // ------------------------------------------

// ------------------------------------------ // POST DATA // ------------------------------------------

Elisa Burghard
Elisa Burghard
9,276 Points

Hi Stan, I think you are using quotation marks (' ') instead of backticks (``) when assigning your html!

2 Answers

Stan Byford
Stan Byford
9,387 Points

Solved I was using a ' instead of a ` in other words for those with visual difficulties an apostrophy instead of a backtick

Elisa Burghard
Elisa Burghard
9,276 Points

Happy you figured it out by yourself :)

Stan Byford
Stan Byford
9,387 Points

Thanks, Elisa. I just thought back to my teens (yeah my memory goes back that far) and sitting down with a magazine and copying code it was always a comma, semi-colon or such which always caused the problem. Who invented backticks anyway pfft :)

Elisa Burghard
Elisa Burghard
9,276 Points

Hey Stan, I applaud your great memory :) I admit I do like backticks, makes it so easy to use template strings instead "...." + "...." ! But i agree that they are sometimes hard to spot