Question

我正在尝试仅用一个随机段落替换段落列表，但是由于某些原因，JavaScript代码无法完成该工作。

我已经尝试在函数结束后重新排列变量，但是我无法弄清楚出了什么问题。

这是我的HTML元素的开始方式：

<body>
  <div id = "quotes">
    <p>&#8220;<a href="https://theunboundedspirit.com/ananda-coomaraswamy-quotes/">Art</a> is the supreme task and the truly metaphysical activity in this life.&#8221;</p>
    <p>&#8220;Underneath this reality in which we live and have our being, another and altogether different reality lies concealed.&#8221;</p>
    <p>&#8220;We obtain the concept, as we do the form, by overlooking what is individual and actual; whereas nature is acquainted with no forms and no concepts, and likewise with no species, but only with an X which remains inaccessible and undefinable for us.&#8221;</p>
    <p>&#8220;Everything which distinguishes man from the animals depends upon this ability to volatilize perceptual metaphors in a schema, and thus to dissolve an image into a concept.&#8221;</p>
    <p>&#8220;Our destiny exercises its influence over us even when, as yet, we have not learned its nature: it is our future that lays down the law of our today.&#8221;</p>

这是我对DOM操作的尝试：

"use strict";
const quotes = document.querySelectorAll("p");

const randomize = function() {
  let num = (Math.floor(Math.random() * Math.floor(quotes.length)) - 1);
  let quote = quotes.item(num).innerHTML;
return quote;
}
let randomQuote = randomize();
let passage = document.getElementById('quotes').innerHTML;
passage = randomQuote;
console.log(randomQuote);

Answer 1

更改节点HTML（带有innerHTML）的唯一方法是将 assign 分配给其innerHTML属性，该属性调用内部的setter操作。将节点的innerHTML提取到变量中，然后重新分配该变量将无济于事。（重新分配对其他内容的变量引用本身不会改变任何内容。）

所以，使用

document.getElementById('quotes').innerHTML = randomQuote;

您还需要修复num随机数生成器-使用Math.floor(Math.random() * quotes.length);生成0到quotes.length - 1之间的数字，否则num有时为{{1} }（当然，其索引不存在）：

-1

"use strict";
const quotes = document.querySelectorAll("p");

const randomize = function() {
  const num = Math.floor(Math.random() * quotes.length);
  return quotes.item(num).innerHTML;
}
const randomQuote = randomize();
document.getElementById('quotes').innerHTML = randomQuote;

Answer 2

问题是

<body>
  <div id="quotes">
    <p>&#8220;<a href="https://theunboundedspirit.com/ananda-coomaraswamy-quotes/">Art</a> is the supreme task and the truly metaphysical activity in this life.&#8221;</p>
    <p>&#8220;Underneath this reality in which we live and have our being, another and altogether different reality lies concealed.&#8221;</p>
    <p>&#8220;We obtain the concept, as we do the form, by overlooking what is individual and actual; whereas nature is acquainted with no forms and no concepts, and likewise with no species, but only with an X which remains inaccessible and undefinable
      for us.&#8221;</p>
    <p>&#8220;Everything which distinguishes man from the animals depends upon this ability to volatilize perceptual metaphors in a schema, and thus to dissolve an image into a concept.&#8221;</p>
    <p>&#8220;Our destiny exercises its influence over us even when, as yet, we have not learned its nature: it is our future that lays down the law of our today.&#8221;</p>

将pass的值设置为引号的innerHTML的瞬时值，它不是引用（在javascript btw中是不可能的）。

let passage = document.getElementById('quotes').innerHTML;

只需用随机引号覆盖pass的值。相反，您应该写

passage = randomQuote;

Answer 3

问题出在这里：

let passage = document.getElementById('quotes').innerHTML;
passage = randomQuote;

您应该这样做：

let passage = document.getElementById('quotes');
passage.innerHTML = randomQuote;

为什么

在这一行：

let passage = document.getElementById('quotes').innerHTML;

实际上，您正在获取从.innerHTML到passage的字符串引用，而不是元素本身。

因此，在下一行：

passage = randomQuote;

您仅将字符串替换为另一个字符串，而不是替换元素的属性值。因为passage不是元素，所以它是一个字符串。

Answer 4

在您的示例中，您无需为innerHtml分配新的引号，而只需为其变量更改其值，该变量不再保留对innerHtml的引用，而仅是值

只需更改此：

let passage = document.getElementById('quotes').innerHTML;

收件人：

document.getElementById('quotes').innerHTML= randomQuote;

为什么我的DOM操作在JavaScript中不起作用？

4 个答案: