0
214
ViewsScripts que no se publican en la ventana del navegador
Mi desafío al crear una aplicación de tareas pendientes para un curso de JS es usar secuencias de comandos para crear nuevos elementos y contenido de textContent , y luego enviarlos al navegador. Mis scripts crean los elementos, pero no muestran el texto en el navegador.
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> 
2 answers
Answer question0
Simplemente necesita cambiar su valor "todo.text" a un valor adecuado que tenga su matriz de todos. En este caso, simplemente está pasando la cadena con el valor incorrecto y se puede solucionar con esto:
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> Simplemente debe pasar todo.title en lugar de todo.text , ya que así ha definido el valor del objeto y debe estar dentro template literals con marcadores de posición ( ${} ) para que aparezca el valor en lugar de un simple string literal .
Lea más sobre ellos aquí
0
Intente poner su secuencia de comandos en el encabezado con el atributo diferido:
<head> <script src="todos-app.js" defer></script> </head>De esta forma, estará seguro de que toda la página (incluido el cuerpo) existe cuando se ejecuta el script.