Question

我的代码无法正常工作，我得到了一个＆＃34;未捕获的TypeError：无法读取属性＆＃39; getElementByTagName＆＃39;在第76行的HTMLButtonElement.countInParagraphs中为null。你能帮我解决我的问题吗？我想新眼睛可以比我更好地找出问题。谢谢

<!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>

Answer 1

尝试在</body>之前将脚本移动到HTML文档的末尾，以便它看起来像这样：<script>...</script></body>。

我相信null意味着该元素在DOM中尚不存在，而不是undefined，这意味着它在DOM中，因此可以找到它，但是未定义。

如果您的脚本在加载HTML文档的其余部分之前执行，则通常会收到null，有时可能会出现undefined错误。

Answer 2

由于没有id为'wordList'的元素，因此会抛出错误。但是有一个id为'word'的元素。因此，您可以将ID替换为第74行中的var midDiv = document.getElementById("word");。

JavaScript：未捕获的TypeError

2 个答案: