Диапазон внутри тега p с textContent и style.color не работает
У меня проблема с Javascript и HTML, и я пока не нашел решения.
Код здесь:
const valide = document.querySelector("#valider");
valide.addEventListener("click", valider);
function valider() {;
let showEmotion = document.getElementById("test").value;
if (showEmotion === "happy") {
document.getElementById("show").textContent = "I'm";
document.getElementById("mood").textContent = "happy";
document.getElementById("mood").style.color = "blue"
}
else if (showEmotion === "sad"){
document.getElementById("show").textContent = "I'm";
document.getElementById("mood").textContent = "sad";
document.getElementById("mood").style.color = "blue"
}
else {
document.getElementById("show").textContent = "I'm";
document.getElementById("mood").textContent = "happy";
document.getElementById("mood").style.color = "blue"
}
}<body>
<h1>What's your mood ?</h1>
<label>Mood: <input type = "text" id = "test" name = "test" required minlength = "2" maxlength = "8" size = "10" /></label>
<button id = "valider">Check</button>
<hr/>
<p id = "show"><span id = "mood"></span></p>
</body>Я не знаю, почему, когда я нажимаю на кнопку, у меня появляется только «Я», а не «Я счастлив» или «Мне грустно» с синим цветом «Счастлив» (или «Грустно»).
Я хочу полное предложение «Я счастлив» или «Мне грустно».
Я думаю, это потому, что тег span находится внутри тега p, потому что я видел, что это может работать только с тегом span. Если я помню, но не знаю, почему это не работает внутри тега p.
Может быть, потому, что тег span в элементе строчного уровня, а p является блочным элементом?
Я думаю, вы правы в своем предположении, что это связано с тем, что тег span находится в элементе строкового уровня, а p является блочным элементом.
Да, глупая ошибка, отредактирую, спасибо, mykaf!
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Я думаю, это потому, что тег span находится внутри тега p.
Да, но, возможно, не по той причине, о которой вы думаете. Поскольку элемент id = "mood" находится внутри элемента id = "show", то когда вы это сделаете:
document.getElementById("show").textContent = "I'm";
Вы эффективно уничтожаете этот контент. В этот момент элемент id = "mood" больше не существует. Итак, следующая строка выдает ошибку:
document.getElementById("mood").textContent = "happy";
Вы можете наблюдать эту ошибку в консоли разработки вашего браузера.
Вместо того, чтобы вкладывать целевые теги друг в друга и беспокоиться о сохранении их содержимого, просто используйте два элемента, вложенных внутри контейнера. Отредактируйте содержимое этих двух элементов, оставив контейнер как есть. Например:
const valide = document.querySelector("#valider");
valide.addEventListener("click", valider);
function valider() {;
let showEmotion = document.getElementById("test").value;
if (showEmotion === "happy") {
document.getElementById("show").textContent = "I'm";
document.getElementById("mood").textContent = "happy";
document.getElementById("mood").style.color = "blue"
}
else if (showEmotion === "sad"){
document.getElementById("show").textContent = "I'm";
document.getElementById("mood").textContent = "sad";
document.getElementById("mood").style.color = "blue"
}
else {
document.getElementById("show").textContent = "I'm";
document.getElementById("mood").textContent = "happy";
document.getElementById("mood").style.color = "blue"
}
}<h1>What's your mood ?</h1>
<body>
<label>Mood: <input type = "text" id = "test" name = "test" required minlength = "2" maxlength = "8" size = "10" /></label>
<button id = "valider">Check</button>
<hr/>
<p><span id = "show"></span> <span id = "mood"></span></p>
</body>Спасибо, Дэвид, это работает, но у меня есть только один вопрос: могу ли я использовать дважды один и тот же идентификатор для тега span? Я имею в виду, это не «плохая практика»?
Если вам нужно несколько элементов с одинаковой идентичностью — одинаковым дизайном, вместо использования идентификатора используйте класс
Хорошо, я тоже об этом подумал, спасибо, Агота!
Я думаю, что эта проблема связана со свойством textContent, и вместо него вам следует использовать свойство InnerHTML.
например вместо этого кода:
if (showEmotion === "happy") {
document.getElementById("show").textContent = "I'm";
document.getElementById("mood").textContent = "happy";
document.getElementById("mood").style.color = "blue"
}
напишите этот код:
if (showEmotion === "happy") {
document.getElementById("mood").innerHTML = "happy";
document.getElementById("mood").style.color = "blue"
document.getElementById("show").innerHTML = "I'm" + document.getElementById("mood").innerHTML;
}
потому что, когда вы пишете этот код, элемент «span» в элементе «p» будет удален из содержимого «span»:
document.getElementById("show").textContent = "I'm";
И вам нужно использовать свойство InnerHTML для распознавания тегов HTML.
Про перезапись я не говорил, в этом методе остаются и элементы span, и p и получается желаемый результат. В противном случае есть лучшие способы сделать это.
Проверьте консоль разработчика на наличие ошибок. Кроме того,
<h1>...</h1>должен находиться внутри тега body.