CODEWITHSUNDEEP
javascripthtmlremovechild
Lee Tou
Lee Tou

Reputation: 35

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])?

Upvotes: 1

Views: 13912

Answers (3)

user4596341
user4596341

Reputation:

Replace line 68 with

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

Upvotes: 5

nashcheez
nashcheez

Reputation: 5183

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.

Upvotes: 0

xxxmatko
xxxmatko

Reputation: 4142

Change the code on the line 68 from this

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

to this

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

Upvotes: 2

Related Questions