removeChild is not a function

问题

window.onload = initPage;
var firstname = false;
var lastname = false;

function initPage() {
    addEventHandler(document.getElementById("firstname"), "blur", verifyFirst);
    addEventHandler(document.getElementById("lastname"), "blur", verifyLast);
    addEventHandler(document.getElementById("submit"), "click", showName);
}

function verifyFirst(e) {
    var me = getActivatedObject(e);
    if (me.value === "") {
        me.className = "error";
        me.focus();
        me.select();
        return;
    }
    else {
        me.className = "";
        firstname = true;
        enabledButton();
    }
}

function verifyLast(e) {
    var me = getActivatedObject(e);
    if (me.value === "") {
        me.className = "error";
        me.focus();
        me.select();
        return;
    }
    else {
        me.className = "";
        lastname = true;
        enabledButton();
    }
}

function enabledButton() {
    if (firstname && lastname) {
        document.getElementById("submit").disabled = false;
    }
    else {
        document.getElementById("submit").disabled = true;
    }
}

function showName() {
    var first = document.getElementById("firstname").value;
    var last = document.getElementById("lastname").value;
    var word = first.toLowerCase() + last.toLowerCase();
    for (var i = 0; i < word.length; i++) {
        var letter = word.charAt(i);
        var img = document.createElement("img");
        img.setAttribute("src", "images/" + letter + ".png");
        img.setAttribute("style", "left:" + 50 * i);
        document.getElementById("displayname").appendChild(img);
    }
    var t = setInterval(removeName, 2000);
}

function removeName() {
    var display = document.getElementById("displayname").getElementsByTagName("img");
    var lengthOfDisplay = display.length;
    for (var i = 0; i < lengthOfDisplay; i++) {
        document.getElementById("displayname").removeChild(display[i]);
    }
    var t = setInterval(showName, 2000);
}

This is my current code that I am working on. I am creating a website with two input fields for first name and last name. On blur of each field after they are verified they will enabled the submit button. When the submit button is clicked, it will combine the first and last name and then separate each letter and call an image that will relate to each letter entered and display it on the displayname div.

Here is where I get the problem:

What I want is to display the image then remove the images and display it again continuously using setInterval. (i.e. the name spelled with the images will be flashing). unfortunately with my code when I try to remove the images using the removeChild function, I get an error of:

UPDATE

Uncaught TypeError: Failed to execute 'removeChild' on 'Node': parameter 1 is not of type 'Node'.

Below is an image of the of the inspection tool with the error and line that is getting the error.

error image

Why am I getting this error when I am asking it to remove the images with removeChild(display[i])?

回答1:

Replace line 68 with

document.getElementById("displayname").innerHTML = '';

回答2:

Change the code on the line 68 from this

document.getElementById("displayname".removeChild(display[i]));

to this

document.getElementById("displayname").removeChild(display[i]);

回答3:

removeChild() is a method applicable to a Node (and not a string or a selector as you have used in your code).

document.getElementById("displayname").removeChild(display[i])); should be the appropriate syntax.

来源：https://stackoverflow.com/questions/40968949/removechild-is-not-a-function

标签

javascript

html

removechild