在同一函数中创建 <p> 元素并更改样式

Question

希望你们今天过得愉快。

我正在使用 "createElement" 和 "appendChild" 在 div 中创建一个段落。

代码如下所示（抱歉粗略的工作）：

var para = document.createElement("p");
para.id = "cursorText";
var node = document.createTextNode(rand);
para.appendChild(node);
var element = document.getElementById("cursorPos");
element.appendChild(para);

这将创建段落并在其中放入一个随机单词，并将其附加到 div "cursorPos"。

它创建如下元素：

<p id="cursorText">Hello Whosebug</p>

id para 中的文本随着每次点击按钮而改变（从数组中随机选择一个词），目标是在每次点击后淡出。

我正在尝试使用以下代码执行此操作：

var elem = document.getElementById("cursorText");
elem.style.transition = "opacity 2.0s linear 1s";
elem.style.opacity = "0";

但它一直告诉我 "Uncaught TypeError: Cannot read property 'style' of null" @ Line 40 AKA 开始于 elem.style.transition...

的行

请记住以下几点：2个属性（创建文本节点和动画）必须在同一个函数中。我已经在一个单独的函数中尝试过它，但它没有用。

感谢阅读这个神秘的混乱，非常感谢任何帮助:)

Answer 1

您将 ID 设为 "cursorText"，而不是 "para"。

此外，我个人建议您创建一个 CSS class，并在新对象上设置 class 属性以匹配 CSS class 以及您要对新创建的段落进行的所有更改。

Answer 2

当你制作变量 elem 时，你被告知要通过一个你从未初始化的 id 来获取。如果你查看你的 para class 你会发现你输出的 id 是 id="cursorText" 虽然当你试图风格化时，你告诉它抓住 id="para"。因此，您收到了 null...。快速解决方法是更改您的 id 查询功能。即

var elem = document.getElementById("cursorText");

在同一函数中创建 <p> 元素并更改样式

Creating a <p> element and changing style in same function

javascript

css

appendchild

css-animations