Как заменить узел createText другой строкой - Javascript
Ниже приводится функция для отображения букв, введенных пользователем на html-странице. Я хочу, чтобы это было так:
Но я получаю что-то вроде этого:
Как сделать так, чтобы появлялся только последняя строка?
Вот мой код:
var words = ['quaffle', 'bludger', 'pensieve', 'harry', 'lupin',
'butterbeer', 'polyjuice', 'patronus', 'horcrux', 'voldemort'];
correctletters='';
missedletters='';
function getRandomWord(){
randomWord = words[Math.floor(Math.random()* words.length)];
wordlength = randomWord.length;
}
function getGuess(){
letterGuessed = document.getElementById("inputfield").value.toLowerCase();
document.getElementById("inputfield").value = null;
alert(randomWord);
alert(letterGuessed);
r = randomWord.includes(letterGuessed);
if (r == true){
correctletters = correctletters + letterGuessed;
alert("correct letters: "+correctletters);
}
else{
missedletters = missedletters+letterGuessed;
alert("missed letters: "+missedletters);
}
guess = missedletters + correctletters;
displayGuessedLetters();
}
}
function displayGuessedLetters(){
guessedletters = document.createElement("div");
content = document.createTextNode(guess);
guessedletters.appendChild(content);
container = document.getElementById("inputcontainer");
container.appendChild(guessedletters);
guessedletters.style.cssText = 'font-family: "Josefin Sans"; font-size:
30px; text-transform: uppercase; color: rgb(255, 85, 49);';
}
Обновлено: Дело в том, что пользователь набирает письмо. Он отображается на веб-странице без этих повторений. Например, если пользователь вводит «а», в контейнере будет отображаться «а». В следующий раз, когда пользователь наберет «b», контейнер должен иметь «a b» Только вместо a, а затем отобразить ab.
попробуйте display: inline-block
@Cinn Когда я пытаюсь, ничего не выходит.
@ Devika.S Используя guessedletters.appendChild(content), вы добавляете нового потомка при каждом вызове displayGuessedLetters(). Целью innerHTML / innerText является перезапись содержимого элемента. Так что попробуйте что-нибудь вроде container.innerHTML(`<div>${guess}</div>`). (и поместите css в другое место, например #inputcontainer div { font-family: ...etc })
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Пожалуйста, добавьте все соответствующие части кода в следующие вопросы (например, correctLetters, missedletters и т. д.)
Вы добавляете новый DIV каждый раз, когда вызывается функция displayGuessedLetter. Вам просто нужно добавить новый letterGuessed к контенту:
function displayGuessedLetters(){
content = document.createTextNode(letterGuessed);
container = document.getElementById("inputcontainer");
container.appendChild(content);
}
Просто добавьте пробел между ними и примените стили CSS к контейнеру. Я бы также переименовал «inputcontainer» в «outputcontainer».
Если мой код не соответствует вашим потребностям, просто прокомментируйте, и я попробую посмотреть! ваше здоровье
РЕДАКТИРОВАТЬ: рабочая рабочий пример: https://jsfiddle.net/ncpfxqhL/6/
Дело в том, что пользователь набирает письмо. Он отображается на веб-странице без этих повторений. Например, если пользователь вводит «а», в контейнере будет отображаться «а». В следующий раз, когда пользователь наберет «b», контейнер должен иметь «a b» Только вместо a, а затем отобразить ab. Я обновлю свой пост остальным кодом.
вам, кстати, следует попытаться использовать меньше глобальных переменных. Если вы используете одно и то же имя переменной в другой области, это может привести к сбивающим с толку ошибкам. scotch.io/tutorials/understanding-scope-in-javascript
Спасибо! Это именно то, что мне нужно.
вы можете использовать innerHTML вот так:
guessedletters.innerHTML = content