removeChild 不是函数 [英] 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);
}

这是我目前正在处理的代码.我正在创建一个网站，其中包含两个输入字段的名字和姓氏.在验证后每个字段模糊时，他们将启用提交按钮.当提交按钮被点击时，它将合并名字和姓氏，然后将每个字母分开，并调用一个与输入的每个字母相关的图像并将其显示在显示名 div 上.

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:

我想要的是显示图像，然后删除图像并使用 setInterval 再次连续显示.(即与图像拼写的名称将闪烁).不幸的是，当我尝试使用 removeChild 函数删除图像时，我的代码出现以下错误:

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:

更新

未捕获的类型错误:无法在节点"上执行removeChild":参数 1 不是节点"类型.

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.

当我要求它使用 removeChild(display[i]) 删除图像时，为什么会出现此错误?

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

推荐答案

将第 68 行替换为

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

这篇关于removeChild 不是函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！