Question

我正在写作业，其中我必须制作一个页面，其中包含10本书，其中包含有关使用DOM的一些信息及其封面图像的信息，即使我将JS文件链接到HTML文件，也看不到任何内容当我在浏览器中打开HTML文件时。我在做什么错了？

'use strict';

{

  const booksObj = {
    how_to_create_a_mind: {
      title: 'How to Create a Mind: The Secret of Human Thought Revealed',
      author: 'Ray Kurzweil',
      language: 'english',
    },
    universe_from_nothing: {
      title: 'A Universe from Nothing',
      author: 'Lawrence M. Krauss',
      language: 'english',
    },
    sapiens: {
      title: 'Sapiens: A Brief History of Humankind',
      author: 'Yuval Noah Harari',
      language: 'english',
    },
    homo_deus: {
      title: 'Homo Deus: A Brief History of Tomorrow',
      author: 'Yuval Noah Harari',
      language: 'english',
    }
  };


  const root = document.getElementById('root');

  function booksList() {
    const div = document.createElement('div');
    root.appendChild(div);
    const h1 = document.createElement('h1');
    div.appendChild(h1);
    h1.appendChild(document.createTextNode('My List Of Books'));

    for (const key in booksObj) {
      const h2 = document.createElement('h2');
      root.appendChild(h2);
      h2.appendChild(document.createTextNode(booksObj[key]['title']));
      const author = document.createElement('p');
      root.appendChild(author);
      author.appendChild(document.createTextNode(booksObj[key]['author']));
      const language = document.createElement('p');
      root.appendChild(language);
      language.appendChild(document.createTextNode(booksObj[key]['language']));
      const img = document.createElement('img');
      root.appendChild(img);
      img.appendChild(document.createTextNode(booksObj[key]['images']));
      img.src = bookImage;
    }
  }
  booksList();

<div id="root"></div>

Answer 1

您似乎在脚本末尾缺少}。在这里https://jsfiddle.net/fwL0vx46/

查看小提琴

您的代码导致unexpected end of input异常，该异常显示在开发者工具控制台中。

Answer 2

使用严格的语法后，在大括号中。这会导致脚本出错。

'use strict';
  const bookImage = '';
  const booksObj = {
how_to_create_a_mind: {
  title: 'How to Create a Mind: The Secret of Human Thought Revealed',
  author: 'Ray Kurzweil',
  language: 'english',
},
universe_from_nothing: {
  title: 'A Universe from Nothing',
  author: 'Lawrence M. Krauss',
  language: 'english',
},
sapiens: {
  title: 'Sapiens: A Brief History of Humankind',
  author: 'Yuval Noah Harari',
  language: 'english',
},
homo_deus: {
  title: 'Homo Deus: A Brief History of Tomorrow',
  author: 'Yuval Noah Harari',
  language: 'english',
}
  };


  const root = document.getElementById('root');

  function booksList() {
const div = document.createElement('div');
root.appendChild(div);
const h1 = document.createElement('h1');
div.appendChild(h1);
h1.appendChild(document.createTextNode('My List Of Books'));

for (const key in booksObj) {
  const h2 = document.createElement('h2');
  root.appendChild(h2);
  h2.appendChild(document.createTextNode(booksObj[key]['title']));
  const author = document.createElement('p');
  root.appendChild(author);
  author.appendChild(document.createTextNode(booksObj[key]['author']));
  const language = document.createElement('p');
  root.appendChild(language);
  language.appendChild(document.createTextNode(booksObj[key]['language']));
  const img = document.createElement('img');
  root.appendChild(img);
  img.appendChild(document.createTextNode(booksObj[key]['images']));
  img.src = bookImage;
}
  }
  booksList();

<div id="root"></div>

注意：我添加了const bookImage = '';来防止发生另一个错误，因为该错误未定义。

Answer 3

'use strict';

{

  const booksObj = {
    how_to_create_a_mind: {
      title: 'How to Create a Mind: The Secret of Human Thought Revealed',
      author: 'Ray Kurzweil',
      language: 'english'
    },
    universe_from_nothing: {
      title: 'A Universe from Nothing',
      author: 'Lawrence M. Krauss',
      language: 'english'
    },
    sapiens: {
      title: 'Sapiens: A Brief History of Humankind',
      author: 'Yuval Noah Harari',
      language: 'english'
    },
    homo_deus: {
      title: 'Homo Deus: A Brief History of Tomorrow',
      author: 'Yuval Noah Harari',
      language: 'english'
    }
  };


  const root = document.getElementById('root');

  function booksList() {
    const div = document.createElement('div');
    root.appendChild(div);
    const h1 = document.createElement('h1');
    div.appendChild(h1);
    h1.appendChild(document.createTextNode('My List Of Books'));

    for (const key in booksObj) {
      const h2 = document.createElement('h2');
      root.appendChild(h2);
      h2.appendChild(document.createTextNode(booksObj[key]['title']));
      const author = document.createElement('p');
      root.appendChild(author);
      author.appendChild(document.createTextNode(booksObj[key]['author']));
      const language = document.createElement('p');
      root.appendChild(language);
      language.appendChild(document.createTextNode(booksObj[key]['language']));
      const img = document.createElement('img');
      root.appendChild(img);
      let bookImage = img.appendChild(document.createTextNode(booksObj[key]['images']));
      img.src = bookImage;
    }
  }
  booksList();
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Page Title</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" type="text/css" media="screen" href="style.css">
</head>

<body>
  <div id="root"></div>
  <script type='text/javascript' src='app.js'></script>
</body>

</html>

请检查并提供反馈。

Answer 4

您的HTML部分是正确的，但是您在js文件中放了一些额外的括号，然后复制并粘贴此代码。

'use strict';

  const booksObj = {
    how_to_create_a_mind: {
      title: 'How to Create a Mind: The Secret of Human Thought Revealed',
      author: 'Ray Kurzweil',
      language: 'english',
      images : ''
    },
    universe_from_nothing: {
      title: 'A Universe from Nothing',
      author: 'Lawrence M. Krauss',
      language: 'english',
      images : ''
    },
    sapiens: {
      title: 'Sapiens: A Brief History of Humankind',
      author: 'Yuval Noah Harari',
      language: 'english',
      images : ''
    },
    homo_deus: {
      title: 'Homo Deus: A Brief History of Tomorrow',
      author: 'Yuval Noah Harari',
      language: 'english',
      images : ''
    }
  };


  const root = document.getElementById('root');


  function booksList() {
    const div = document.createElement('div');
    root.appendChild(div);
    const h1 = document.createElement('h1');
    div.appendChild(h1);
    h1.appendChild(document.createTextNode('My List Of Books'));

    for (const key in booksObj) {
      const h2 = document.createElement('h2');
      root.appendChild(h2);
      h2.appendChild(document.createTextNode(booksObj[key]['title']));
      const author = document.createElement('p');
      root.appendChild(author);
      author.appendChild(document.createTextNode(booksObj[key]['author']));
      const language = document.createElement('p');
      root.appendChild(language);
      language.appendChild(document.createTextNode(booksObj[key]['language']));
      const img = document.createElement('img');
      root.appendChild(img);
      var bookImage = img.appendChild(document.createTextNode(booksObj[key]['images']));
      img.src = bookImage;
    }
  }

booksList();

为什么此DOM代码没有出现在页面上？

4 个答案: