开发者问题收集

使用 querySelector 调用 span 标签的类

2021-03-15
899
javascript html

我创建了一个 HTML 文件，其中包含两个 p 标签，用于保存引文的文本和来源。我将来源和引文放在一个对象数组中。我还有对象的第三个可选属性，即年份。但是，当我尝试调用 span 标签的类时，我收到错误消息：

Uncaught TypeError: Cannot set property 'innerHTML' of null

如果我将 <span> 标签更改为 <p> 标签，错误就会消失。如何使用查询选择器调用 span 标签？ 

/*** 
 * `quotes` array 
***/
const quotes = [
  {
    quote: 'The greatest wealth is to live content with little.',
    source: 'Plato',
  },
  {
    quote: 'Don\'t count the days, make the days count.',
    source: 'Muhammad Ali',
  },
  {
    quote: 'You miss 100% of the shots you don\'t take.',
    source: 'Wayne Gretzky',
  },
  {
    quote: 'Ask not what your country can do for you. Ask what you can do for your country.',
    source: 'John F. Kennedy',
    year: '1961'
  },
  {
    quote: 'Test quote',
    source: 'test source',
  }
]


/***
 * `getRandomQuote` function
***/
const getRandomQuote = (numOfQuotes) =>{
  const randomnumber = Math.floor((Math.random() * numOfQuotes));
  return quotes[randomnumber];
}

/***
 * `printQuote` function
***/
const printQuote = () =>{
  const quoteObject = getRandomQuote(quotes.length);
  const quoteText = document.querySelector('.quote');
  const quoteSource = document.querySelector('.source');
  const quoteYear = document.querySelector('.year');
  quoteText.innerHTML = quoteObject.quote;
  quoteSource.innerHTML = quoteObject.source;
  if (quoteObject.year){
    quoteYear.innerHTML = quoteObject.year;
  }
}


/***
 * click event listener for the print quote button
 * DO NOT CHANGE THE CODE BELOW!!
***/

document.getElementById('load-quote').addEventListener("click", printQuote, false);
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Random Quotes</title>
  </head>
  <body>
    <header>
      <h1>Random Quotes</h1>
      <button id="load-quote" class="load-quote">Show another quote</button>
    </header>

    <div class="container">
      <div id="quote-box" class="quote-box">
        <p class="quote">Every great developer you know got there by solving problems they were unqualified to solve until they actually did it.</p>
        <p class="source">Patrick McKenzie<span class="citation">Twitter</span><span class="year">2016</span></p>
      </div>
    </div>
    
    <script src="js/script.js"></script>
  </body>
</html>
3个回答

您正在尝试获取 .source 的子项 因此您应该使用这个选择器： const quoteYear = document.querySelector('.source .year'); 效果很好！

user14502245
2021-03-15

您将元素 year 作为源 div 的子元素，并且您的代码在每次单击按钮后都会替换源的内容 最终，在第一次单击后，带有 year 类的元素将不会出现在 DOM 中 

const quoteSource = document.querySelector('.source');
quoteSource.innerHTML = quoteObject.source;

因此

document.querySelector('.year') 返回 null，最终 'quoteYear.innerHTML' 抛出 null 的 innerHTML

Vinu Prasad
2021-03-15

我已将 span 放在 p 标签之外，因为 quoteSource.innerHTML = ... 将使用 p 标签更改源的 innerHTML。 

/*** 
 * `quotes` array 
***/
const quotes = [
  {
    quote: 'The greatest wealth is to live content with little.',
    source: 'Plato',
  },
  {
    quote: 'Don\'t count the days, make the days count.',
    source: 'Muhammad Ali',
  },
  {
    quote: 'You miss 100% of the shots you don\'t take.',
    source: 'Wayne Gretzky',
  },
  {
    quote: 'Ask not what your country can do for you. Ask what you can do for your country.',
    source: 'John F. Kennedy',
    year: '1961'
  },
  {
    quote: 'Test quote',
    source: 'test source',
  }
]


/***
 * `getRandomQuote` function
***/
const getRandomQuote = (numOfQuotes) =>{
  const randomnumber = Math.floor((Math.random() * numOfQuotes));
  return quotes[randomnumber];
}

/***
 * `printQuote` function
***/
const printQuote = () =>{
  const quoteObject = getRandomQuote(quotes.length);
  const quoteText = document.querySelector('.quote');
  const quoteSource = document.querySelector('.source');
  const quoteYear = document.querySelector('.year');
  quoteText.innerHTML = quoteObject.quote;
  quoteSource.innerHTML = quoteObject.source; // THIS CODE IS WILL REMOVE SPAN
  if (quoteObject.year){
    quoteYear.innerHTML = quoteObject.year;
  }
  else {
   quoteYear.innerHTML = ""
  }
}


/***
 * click event listener for the print quote button
 * DO NOT CHANGE THE CODE BELOW!!
***/

document.getElementById('load-quote').addEventListener("click", printQuote, false);
<header>
      <h1>Random Quotes</h1>
      <button id="load-quote" class="load-quote">Show another quote</button>
    </header>

    <div class="container">
      <div id="quote-box" class="quote-box">
        <p class="quote">Every great developer you know got there by solving problems they were unqualified to solve until they actually did it.</p>
        <p class="source">Patrick McKenzie<span class="citation">Twitter</span></p><span class="year">2016</span>
      </div>
    </div>

更新 如果您必须仅将 span 放在 P 标签内，这里有另一个可行的解决方案， 

/*** 
 * `quotes` array 
***/
const quotes = [
  {
    quote: 'The greatest wealth is to live content with little.',
    source: 'Plato',
  },
  {
    quote: 'Don\'t count the days, make the days count.',
    source: 'Muhammad Ali',
  },
  {
    quote: 'You miss 100% of the shots you don\'t take.',
    source: 'Wayne Gretzky',
  },
  {
    quote: 'Ask not what your country can do for you. Ask what you can do for your country.',
    source: 'John F. Kennedy',
    year: '1961'
  },
  {
    quote: 'Test quote',
    source: 'test source',
  }
]


/***
 * `getRandomQuote` function
***/
const getRandomQuote = (numOfQuotes) =>{
  const randomnumber = Math.floor((Math.random() * numOfQuotes));
  return quotes[randomnumber];
}

/***
 * `printQuote` function
***/
const printQuote = () =>{
  const quoteObject = getRandomQuote(quotes.length);
  const quoteText = document.querySelector('.quote');
  const quoteSource = document.querySelector('.source');
  const quoteYear = document.querySelector('.year');
  quoteText.innerHTML = quoteObject.quote;
 [].reduce.call(quoteSource.childNodes, function(a, b) { return (b.nodeType === 3 ? b.textContent = quoteObject.source : ''); }, '');
  if (quoteObject.year){
    quoteYear.innerHTML = quoteObject.year;
  }
  else {
   quoteYear.innerHTML = ""
  }
}


/***
 * click event listener for the print quote button
 * DO NOT CHANGE THE CODE BELOW!!
***/

document.getElementById('load-quote').addEventListener("click", printQuote, false);
<header>
      <h1>Random Quotes</h1>
      <button id="load-quote" class="load-quote">Show another quote</button>
    </header>

    <div class="container">
      <div id="quote-box" class="quote-box">
        <p class="quote">Every great developer you know got there by solving problems they were unqualified to solve until they actually did it.</p>
        <p class="source">Patrick McKenzie<span class="citation">Twitter</span><span class="year">2016</span></p>
      </div>
    </div>
Dhara
2021-03-15