Задача JS. Не могу решить

Question

Задача JS. Не могу решить

NK163 Ученик (192), на голосовании 1 год назад

Была задача:

Сейчас мы сделаем сайт, который будет помогать определить значение HTML тега. Пусть в этом скрипте будет инпут, в который пользователь будет вводить имя тега. После этого по нажатию на Enter под инпутом пусть выдается описание этого тега. Продумайте, как удобнее всего хранить имена тегов и их описания в соответствии с поставленной задачей. Реализуйте описанный сайт.

Решение:

Хотел сделать объект, где ключами будут html теги, а значениями - описания этих тегов. Но почему - то выводит ошибку:
Uncaught TypeError: HTMLwords is not iterable
at HTMLInputElement.<anonymous> (script.js:369:18)

Дополнен 1 год назад

Что - то уже подзабыл вопрос и решил сам. Решил так:

HTML:

<input type="" name="" placeholder="Введите значение HTML-тега">
<p>Значение</p>

JS:

let tags = {
p: "параграф",
div: "отдельный блок",
header: "шапка сайта"
}

let input = document.querySelector('input')
let p = document.querySelector('p')
input.addEventListener('blur', function(){
for (let key in tags){
let word = key;
word = word.toLowerCase()
if (input.value == word) {
p.textContent = tags[key]
break;
} else {
p.textContent = 'Значение не найдено'
}
}
})

Answer 1

Для реализации данной задачи, можно использовать простой подход, храня информацию об именах тегов и их описаниях в виде объекта JavaScript. Вот пример реализации сайта:

HTML:
<!DOCTYPE html>
<html>
<head>
<title>Определение значения HTML тега</title>
</head>
<body>
<h1>Определение значения HTML тега</h1>
<input type="text" id="tagInput" placeholder="Введите имя тега">
<div id="tagDescription"></div>

<script src="script.js"></script>
</body>
</html>

JavaScript (script.js):
// Объект с именами тегов и их описаниями
var tagDescriptions = {
"html": "Определяет корневой элемент HTML документа.",
"head": "Содержит метаинформацию о HTML документе.",
"body": "Содержит видимый контент HTML документа.",
// Добавьте остальные имена тегов и их описания
};

// Функция для определения значения тега
function defineTagValue() {
var tagInput = document.getElementById("tagInput");
var tagDescription = document.getElementById("tagDescription");

var tagName = tagInput.value.toLowerCase();
var description = tagDescriptions[tagName];

if (description) {
tagDescription.innerHTML = "<strong>" + tagName + "</strong>: " + description;
} else {
tagDescription.innerHTML = "Тег <strong>" + tagName + "</strong> не найден.";
}
}

// Обработка события нажатия Enter
var tagInput = document.getElementById("tagInput");
tagInput.addEventListener("keyup", function(event) {
if (event.keyCode === 13) {
event.preventDefault();
defineTagValue();
}
});

В данном примере, имена тегов и их описания хранятся в объекте tagDescriptions. При вводе имени тега и нажатии Enter, вызывается функция defineTagValue(), которая ищет описание тега в объекте tagDescriptions и выводит его на странице.

Примечание: В этом примере предполагается, что пользователь вводит только корректные имена тегов без учета регистра. Если нужна более сложная валидация или поддержка других возможностей, таких как автодополнение или динамическое обновление описаний, может потребоваться дополнительная работа.

Answer 2

Ваша ошибка возникает из-за того, что объект HTMLwords не является итерируемым. Для того чтобы сделать его итерируемым, можно использовать метод Object.entries(). Вот пример кода:

 let HTMLwords = { 
    "html": "Описание html тега", 
    "head": "Описание head тега", 
    "body": "Описание body тега" 
}; 
 
let input = document.querySelector('input'); 
let output = document.querySelector('output'); 
 
input.addEventListener('keydown', function(event) { 
    if (event.keyCode === 13) { 
        let tag = input.value; 
        if (tag in HTMLwords) { 
            output.innerHTML = HTMLwords[tag]; 
        } else { 
            output.innerHTML = 'Такого тега нет в списке'; 
        } 
    } 
});

В этом примере мы создали объект HTMLwords, где ключами являются html теги, а значениями - описания этих тегов. Затем мы добавили обработчик события keydown на инпуте, который проверяет, была ли нажата клавиша Enter. Если да, то мы получаем значение инпута и проверяем, есть ли такой тег в объекте HTMLwords. Если есть, то выводим его описание в output, а если нет - сообщаем об этом.

Answer 3

Саня Семенов Оракул (60497) 1 год назад

codepen.io/norbert123/pen/VwVxpqX

DlazderМудрец (16899) 1 год назад

это Vue? Вроде там приставка v используется...

Саня Семенов Оракул (60497) Dlazder, угу там же подключено во внешних скриптах и в блоке скрипт начинается с new Vue поэтому должно быть видно что используется

Answer 4

Код бы свой показал, чтобы мы поняли, почему у тебя он не итерируется.
А вообще, в твоём случае итерировать даже не нужно