2016-12-05 10 views
1
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.removeChild не является функцией

Вот где я получаю эту проблему:

То, что я хочу, чтобы отобразить изображение, а затем удалить изображения и отобразить его снова непрерывно с помощью setInterval. (то есть имя, записанное с изображениями, будет мигать). к сожалению, с моим кодом, когда я пытаюсь удалить изображения с помощью функции RemoveChild, я получаю ошибку:

UPDATE

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

Ниже образ инструмента проверки с ошибкой и которая получает ошибку.

error image

Почему я получаю эту ошибку, когда я прошу его, чтобы удалить изображения с RemoveChild (дисплей [я])?

+1

Отсутствует ')' в фрагменте 'getElementById (" displayname ".removeChild' – Satpal

ответ

2

линию 68 Заменить

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

Похоже, что это исправил мой код. Такая простая коррекция пока не поняла. Думаю, я был слишком много в Узлах, которые я забыл об этом простом коде. Спасибо. Теперь мне просто нужно исправить часть setInterval моего кода, чтобы время было таким, чтобы оно было красивым и не отображало имя дважды каждый раз. –

+0

Это удалит все из '# displayname', в то время как OP код удаляет только узлы «img». И если OP действительно хочет удалить все, нет необходимости в цикле 'for' на линии 67. – Dogbert

1

Изменить код на линии 68 от этого

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

к этому

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

Обновлено с новой ошибкой. Извините. Я пытался исправить свой код во время написания этого сообщения, и, я думаю, я сделал небольшую синтаксическую ошибку. фактическая ошибка, что я получаю, что я застрял. –

0

removeChild() представляет собой метод применим к узлу (и не строка или селектор, как вы использовали в своем коде).

document.getElementById("displayname").removeChild(display[i])); должен быть соответствующим синтаксисом.

+0

Обновлено с новой ошибкой в ​​корме это небольшая синтаксическая ошибка. Извини за это. Это фактическая ошибка, на которую я смотрел. Исправляя это, я предполагаю, что допустил ошибку и получил синтаксическую ошибку. –

Смежные вопросы