JavaScript:UncaughtTypeError
我的代码不起作用，并且在第76行的HtmlButtoneElement.countInParagraphs处出现“Uncaught TypeError:无法读取null的属性'getElementByTagName'。 你能帮我解决我的问题吗。 我认为新手比我能更好地解决这个问题。 多谢各位JavaScript:UncaughtTypeError,javascript,html,google-chrome,Javascript,Html,Google Chrome,我的代码不起作用，并且在第76行的HtmlButtoneElement.countInParagraphs处出现“Uncaught TypeError:无法读取null的属性'getElementByTagName'。 你能帮我解决我的问题吗。 我认为新手比我能更好地解决这个问题。 多谢各位 <!DOCTYPE html> <html> <head> <title>Word Count Version 2</title
<!DOCTYPE html>
<html>
<head>
<title>Word Count Version 2</title>
<style>
button{
margin: 1em;
}
#leftArea{
width: 35%;
float: left;
height: 500px;
background-color: #C200AF;
padding: 10px;
}
#rightArea{
width: 30%;
float: left;
height: 500px;
background-color: #C2AF00;
padding: 10px;
}
#midArea{
width: 30%;
float: left;
height: 500px;
background-color: #00C2AF;
padding: 10px;
}
h3{
margin-left: 10px;
}
#paragraphs > p{
background-color: #66ffff;
}
</style>
<script>
"use strict;"
function buildParagraphs()
{
var sentenceArea = document.getElementById("sentence");
var words = sentenceArea.value;
if(words.length == 0)
{
return;
}
var wordsArray = words.split(" ");
//Get the div element with id = paragraphs and assign it to a variable called midDiv
var midDiv = document.getElementById("paragraphs");
for(var i = 0; i < wordsArray.length; i++)
{
//Build the p elements
//create a new p element and store it in a variable called newPara
var newPara = document.createElement("p");
//create a new text node from the current item in the wordsArray and store it in a variable called textNode
var textNode = document.createTextNode(wordsArray[i]);
//Append the text node to the newPara you just created
newPara.appendChild(textNode);
//Append the newPara element to the midDiv element
midDiv.appendChild(newPara);
}
sentenceArea.value = "";
}
function countInParagraphs()
{
var textArea = document.getElementById("searchWord");
var searchWord = textArea.value;
//Get the div element with id = paragraphs and assign it to a variable called midDiv
var midDiv = document.getElementById("wordList");
//Declare a variable called paraElements and assign all of the paragraph (p) tags from the midDiv element to it.
---> LINE 76 var paraElements = midDiv.getElementsByTagName("p");
var count = 0;
//Start a for-loop that sets a variable i to 0; checks it against the length of the paraElements array; and increments i by 1
for (var i =0; i <paraElements.length; i++)
{
//Write an if-statement that checks the innerHTML of the current paragraph element
if (searchWord == paraElements[i].innerHTML)
{
count++
}
//against the searchWord variable to see if they are the same. If they are, add 1 to the count.
}//end for
//Get the element with id = word and assign it to a variable called wordArea
var wordArea = document.getElementById("word");
//Assign the searchWord to the innerHTML of wordArea
wordArea.innerHTML = searchWord;
//Get the element with id = wordCount and assign it to a variable called countArea
var countArea = document.getElementById("wordCount");
//Assign the count to the innerHTML of countArea
count.innerHTML = countArea;
textArea.value = "";
}
window.onload = function()
{
var buildBtn = document.getElementById("buildBtn");
buildBtn.onclick = buildParagraphs;
var countBtn = document.getElementById("countBtn");
countBtn.onclick = countInParagraphs;
}
</script>
</head>
<body>
<div id = "leftArea">
<div>
Enter a sentence:
<textarea id = "sentence" rows = "10" cols = "30"></textarea>
</div>
<div>
<button type="button" id = "buildBtn">Build paragraphs</button>
</div>
<div>
Enter a word to find in the paragraphs:
<input type="text" id = "searchWord">
</div>
<div>
<button type="button" id = "countBtn">Count in paragraphs</button>
</div>
</div>
<div id = "midArea">
<h3>Word list</h3>
<div id = "paragraphs">
</div>
</div>
<div id = "rightArea">
The number of times the word '<span id = "word"></span>' turns up in the sentence is: <span id = "wordCount"></span>
</div>
</body>
字数统计第2版
钮扣{
边缘：1米；
}
#左区{
宽度：35%；
浮动：左；
高度：500px；
背景色：#C200AF；
填充：10px；
}
#右区{
宽度：30%；
浮动：左；
高度：500px；
背景色：#C2AF00；
填充：10px；
}
#中部地区{
宽度：30%；
浮动：左；
高度：500px；
背景色：#00C2AF；
填充：10px；
}
h3{
左边距：10px；
}
#段落>p{
背景色：#66ffff；
}
"严格使用,；"
函数
{
var sentenceArea=document.getElementById（“句子”）；
var words=sentenceArea.value；
if（words.length==0）
{
返回；
}
var wordsArray=words.split（“”）；
//获取id=段落的div元素，并将其分配给名为midDiv的变量
var midDiv=document.getElementById（“段落”）；
for（var i=0；i第76行var paraElements=midDiv.getElementsByTagName（“p”）；
var计数=0；
//启动一个for循环，将变量i设置为0；对照paraElements数组的长度检查它；并将i递增1
对于（var i=0；i请尝试将脚本移动到HTML文档的末尾，就在
之前，使其看起来像这样：..
我相信null
意味着元素在DOM中还不存在，而undefined
则意味着它在DOM中，因此可以找到它，但它是未定义的
如果您的脚本在加载其余HTML文档之前执行，您通常会得到null
，有时可能会出现未定义的错误。由于没有id为“wordList”的元素，这会引发错误。但有一个id为“word”的元素。因此，您可以将id替换为var midDiv=document.getElementById（“word”）；
在第74行。首先，页面上没有Id==wordList的元素。但请尝试将字符串76更改为代码：
var paraElements = [];
if (midDiv) {
paraElements = midDiv.getElementsByTagName("p");
}
您没有带id=“wordList”
的元素，因此前一行中的midDiv
为null
。您可能想使用“段落”
，而不是“wordList”
（如buildparations（）
）。@nnnnnn是正确的，可能拼写错误