为什么我的功能不起作用？

Question

我的代码在很久以前工作得很好（计算它在文本框中找到你的单词的次数），现在它已经不存在了。我可能偶然删除或添加了一些东西。仔细观察，无法发现它为什么不起作用：

编辑：添加了CSS，这里是demo。

HTML：

<div id="outer">
    <div id="table">
        <div id="big_block">
            <div class="top_block">
                <div id="left">
                    <form>
                        <input id="box_top" type="text" placeholder="Type your word here">
                    </form>
                    <button id="bt_1" onclick="count()"> <strong>Find</strong>

                    </button>
                </div>
                <div id="right"></div>
            </div>
            <div class="bottom_block">
                <div id="textDiv">
                    <textarea id="textBox" placeholder="Insert your text here."></textarea>
                </div>
            </div>
        </div>
    </div>
</div>

的JavaScript：

function count() {
    //I define both word and text here based on the input boxes.
    var word = document.getElementById("box_top").value;
    var text = document.getElementById("textBox").value;
    var hits = [];

    //Then I push the word to an array everytime I find it:
    for (var x = 0; x < text.length; x++) {
        if (text.substr(x, word.length) === word) {
            hits.push(word);
        }
    }

    //Here I define what the paragraphs will look like so later I can append them on conditions
    var p0 = document.createElement("p");
    var n0 = document.createTextNode("You didn't type a word!");
    p0.appendChild(n0);

    var pt = document.createElement("p");
    var nt = document.createTextNode("You didn't insert a text!");
    pt.appendChild(nt);

    var p1 = document.createElement("p");
    var n1 = document.createTextNode(word + " wasn't found!");
    p1.appendChild(n1);

    var p2 = document.createElement("p");
    var n2 = document.createTextNode(word + " was found once.");
    p2.appendChild(n2);

    var p3 = document.createElement("p");
    var n3 = document.createTextNode(word + " was found " + hits.length + " times!");
    p3.appendChild(n3);

    var rightDiv = document.getElementById("right");
    //Below, before I appending something, I remove anything that is in it.
    rightDiv.removeChild(rightDiv.firstChild);

    //My condition: depending on the array length, I'll append a different paragraph to my div.
    if (!word) {
        rightDiv.appendChild(p0);
    } else if (!text) {
        rightDiv.appendChild(pt);
    } else {
        if (hits.length === 0) {
            rightDiv.appendChild(p1);
        } else if (hits.length === 1) {
            rightDiv.appendChild(p2);
        } else {
            rightDiv.appendChild(p3);
        }

    }
}

CSS

#outer{
    display: table;
    position: absolute;
    height: 100%;
    width: 100%;
    }

#table{
    display: table-cell;
    vertical-align: middle
    }

#big_block{
    height: 260px;
    width: 480px;
    margin-left: auto;
    margin-right: auto; 
    }

.top_block{
    margin-left:10px;
    height:130px;
    width:460px;
    }
.bottom_block{
    height:40%;
    }

#right{
    margin-left:5px;
    height:100px;
    width:220px;
    top:50%;
    margin-top:-50px;
    float:left;
    position:relative;
    overflow:auto;
    background-color:#D1FFFF;
    border-radius:10px;
    opacity: 0.5
    }
#right p{
    text-align:center;
    margin-top: 33px;
    font-size: 1em;
    }

#left{
    background-color:#3399FF;
    height:100px;
    width:235px;
    top:50%;
    margin-top:-50px;
    float:left;
    position:relative;
    border-radius:10px

    }

form {
    font-size: 12px;
    font-family: Verdana, Arial, Sans-Serif;
    display: inline-block;
    margin-left:0
    }   

#box_top:hover{
    background-color:#FDFFFD
    }

#bt_1 {
    height:35px;
    width:70px;
    margin-top: 25px;
    border-radius:5px;
    }

#bt_1:hover {
    height:35px;
    width:70px;
    margin-top: 25px;
    border-radius:5px;
    background-color:#d8dfd9
    }

#textDiv {
    margin-left:10px;
    top:10px;
    width:100px;
    height:100px
    ;position:relative
    }

#textBox{
    width:460px;
    height:100px;
    left:0;
    top:0;
    position:absolute
    }

Answer 1

您正试图从＆＃34; rightDiv＆＃34;中删除内容。如果它是空的，那么你就会收到错误。执行此操作的代码应该如下所示：

while (rightDiv.firstChild)
    rightDiv.removeChild(rightDiv.firstChild);

总是检查开发者控制台，当代码似乎没有按预期工作时。

Answer 2

如果div不包含子项，则会抛出错误。检查孩子是否存在将孩子移除。

使用此

rightDiv.firstChild && rightDiv.removeChild(rightDiv.firstChild);

DEMO