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 bine 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.

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

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 bine 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.

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

• javascript
• html
• removechild

• 1 Missing ) in fragment getElementById("displayname".removeChild – Satpal Commented Dec 5, 2016 at 7:14

3 Answers 3

Replace line 68 with

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

Change the code on the line 68 from this

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

to this

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

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.