Scripts Not Serving to Browser Window

user_16831471 0
Viewed 44

My challenge in creating a todo's application for a JS course is to use scripts to create new elements and textContent, and then serve to browser. My scripts are creating the elements, but not displaying the text in the browser.

const todos = [{
        title: 'make bed',
        completed: true
    }, {
        title: 'shower',
        completed: false
    }, {
        title: 'shave',
        completed: true
    }, {
        title: 'feed the cat',
        completed: false
    }, {
        title: 'crush the day',
        completed: false
    }]

    const incompleteTodos = todos.filter(function (todo) {
        return !todo.completed
    })

    const summary = document.createElement('h2')
    summary.textContext = `You have ${incompleteTodos.length} todos left`
    document.querySelector('body').appendChild(summary)
    todos.forEach(function (todo) {
              
        const p = document.createElement('p')
        p.textContent = 'todo.text'
        document.querySelector('body').appendChild(p)

    })
<!DOCTYPE html>
    <html>
    <head></head>
    <body>
    <h1>Todos</h1>
    <script src ="todos-app.js"></script>
    </body>
    </html>

BrowserView + Elements

src javascript
2 Answers

Try putting your script in the header with the defer attribute:

<head>
  <script src="todos-app.js" defer></script>
</head>

This way you are sure the entire page (including the body) exists when the script runs.

user_123485840

You simply need to change your "todo.text" value to a proper value your array of todos has. In this case you are simply passing the string with the wrong value and it can be fixed by this: 

const todos = [{
        title: 'make bed',
        completed: true
    }, {
        title: 'shower',
        completed: false
    }, {
        title: 'shave',
        completed: true
    }, {
        title: 'feed the cat',
        completed: false
    }, {
        title: 'crush the day',
        completed: false
    }]

    const incompleteTodos = todos.filter(function (todo) {
        return !todo.completed
    })

    const summary = document.createElement('h2')
    summary.textContext = `You have ${incompleteTodos.length} todos left`
    document.querySelector('body').appendChild(summary)
    todos.forEach(function (todo) {
              
        const p = document.createElement('p')
        p.textContent = `${todo.title}`
        document.querySelector('body').appendChild(p)

    })
<!DOCTYPE html>
    <html>
    <head></head>
    <body>
    <h1>Todos</h1>
    <script src ="todos-app.js"></script>
    </body>
    </html>

You simply need to pass todo.title instead of todo.text since that's what you have defined your value of the object as and it needs to be within template literals with placeholders ( ${} ) for the value to show up instead of a simple string literal.

Read more about them here

user_145680890
Related