Question

对于非常平庸的问题提前抱歉，我很肯定我错过了一些非常简单的事情。没有进一步的adieu;

当我尝试从HTML中的div中提取一个文本块和一个按钮时，我遇到了类型错误。 div有一个我准确引用的id。对于疏忽，我试图检索文本，对每个单词应用着色（循环通过红色，蓝色和绿色），并用我的彩色文本替换原始文本。它在JSFiddle中运行良好，但我无法在espresso中检索数据 - transcribeText为null。

var transcribeText = document.getElementById("divideTranscript");
transcribeText.onclick = function() {

var words = document.getElementById("transcriptText");
var textArray = words.innerHTML.split(" ");
var count = 0;
var colorArr = ["red", "blue", "green"];
var newWords = document.createElement("div");

for(var i = 0; i < textArray.length; i++){
    var item = textArray[i];
    var newSpan = document.createElement("span");
    var newText = document.createTextNode(item);
    var dotNode = document.createTextNode(" ");

    newSpan.className = colorArr[count % 3];
    newSpan.id = "word"+i;

    newSpan.appendChild(newText);
    newSpan.appendChild(dotNode);
    count++;


};

words.parentNode.replaceChild(newWords, words);


}

   <div id="transcriptText"> It’s that time of year when you clean out your
    closets, dust off shelves, and spruce up your floors. Once you’ve taken
    care of the dust and dirt, what about some digital cleaning? Going
    through all your files and computers may seem like a daunting task, but
    we found ways to make the process fairly painless.</div>
  <br>
  <div id="divideTranscript" class="button">&nbsp;Transform the
    Transcript!&nbsp; </div>

Answer 1

您的问题是javascript在HTML存在之前运行，因此，您无法获得任何ID。有几种方法可以解决这个问题。首先是我的最爱：

window.onload = function name() {
//code to be excuted
}

加载HTML后将调用该函数。 body.onload = function name()也有效。

第二种方法（没有双关语意为哈哈）是将脚本标签放在body标签的末尾。

<body>
<script></script>
</body>

就个人而言，我更常使用第一个，因为我有一个宗教用途的模板，我不喜欢移动标签。那就是我，无论对你有用！希望这有帮助！

从div中提取时，变量为null

1 个答案: