С Новым годом! Форум программистов, компьютерный форум, киберфорум
JavaScript для начинающих
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
0 / 0 / 0
Регистрация: 12.05.2022
Сообщений: 3

Поиск и вывод объекта на страницу

19.09.2022, 10:34. Показов 385. Ответов 4

Студворк — интернет-сервис помощи студентам
Здравствуйте! Помогите пожалуйста - недавно начал изучать JS и в одном из заданий нужно сделать так, чтобы после записи искомого объекта в поле ввода при нажатии на кнопку, этот объект появился на странице. Писал код один в один, как в записи, однако, не работает(((

Помогите, пожалуйста!



HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>FAQ Hero</title>
    <link rel="stylesheet" href="fav.css">
    <link rel="stylesheet" href="animation.css">
</head>
<body>
    <header>
        <a href="main.html" class="move_back">
            Вернуться назад
        </a>
    </header>
    <main>
        <form action="#">
            <input type="text" placeholder="Ваш любимый супергерой">
            <input type="button" value="Подтвердить!">
        </form>
    </main>
    <script src="fav.js"></script>
</body>
</html>

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
let text = document.querySelector('input[type="text"]');
let btn = document.querySelector('input[type="button"]');
let form = document.querySelector('form');
 
btn.addEventListener('click', getHero);
 
function getHero() {
    let heroName = form.querySelector('inrut[type="text"]').value.toLowerCase();
    let common = document.createElement('form');
    let div = document.createElement('div');
    let img = document.createElement('img');
    let p = document.createElement('p');
    let input = document.createElement('input');
    common.innerHTML = form.innerHTML;
    
    function favHero(heroName, src) {
        form.innerHTML = '';
        p.innerHTML = heroName.charAt(0).toUpperCase() + heroName.slice(1);
        img.src = src;
        form.appendChild(div);
        div.appendChild(img);
        div.appendChild(p);
        input.value = 'Изменить';
        input.type = 'button';
        input.style.margin = '5em';
        input.addEventListener('click', function() {
            form.innerHTML = common.innerHTML;
            form.querySelector('input[type="button"]').addEventListener('click', getHero);
        });
        form.appendChild(input);
    }
    
    if(heroName == 'железный человек') {
        let src = 'marvell_img/ironman.png';
        favHero(heroName, src);
    }
    else if(heroName == 'наташа романофф') {
        let src = 'marvell_img/natasha_romanoff.jpg';
        favHero(heroName, src);
    }
    if(heroName == 'человек паук') {
        let src = 'marvell_img/chelovek-pauk.png';
        favHero(heroName, src);
    }
    else if(heroName == 'тор') {
        let src = 'marvell_img/tor.jpg';
        favHero(heroName, src);
    }
    if(heroName == 'капитан америка') {
        let src = 'marvell_img/captain-america.png';
        favHero(heroName, src);
    }
}
0
cpp_developer
Эксперт
20123 / 5690 / 1417
Регистрация: 09.04.2010
Сообщений: 22,546
Блог
19.09.2022, 10:34
Ответы с готовыми решениями:

Поиск и вывод объекта из файла по запросу
Прошу помощи так как уже второй день ломаю себе голову,не могу реализовать поиск объекта класса в файле по полю &quot;модель&quot;,будьте...

Вывод фото из папки объекта, название которой совпадает с ID этого объекта
Д.День. суть вопроса такая есть путь в корне CMS images/objects_db/xxxxA где xxxxA это папки (создаваемые сторонним софтом) с...

Файлы: ввод адреса объекта и вывод данных объекта
Всем привет. Хочу сделать программу, в консоль которой, вводится адрес папки/файла, после чего, консоль выводит данные этого объекта. ...

4
126 / 94 / 34
Регистрация: 24.06.2022
Сообщений: 253
19.09.2022, 10:40
Цитата Сообщение от BitMax Посмотреть сообщение
однако, не работает(((
что такое "однако не работает" ?
ошибки в консоли браузера есть ?
опечатку увидел
строка 8, функция getHero

JavaScript
1
'inrut[type="text"]').
0
0 / 0 / 0
Регистрация: 12.05.2022
Сообщений: 3
19.09.2022, 11:42  [ТС]
Редактор кода выдает ошибку, но на первой строке, не на восьмой.
Опечатку не увидел, возможно потому и не работает.
Пишет, что "переменная text не используется", возможно из-за опечатки. Проверю.
Заранее Спасибо!
0
Эксперт JS
2463 / 1769 / 625
Регистрация: 11.07.2016
Сообщений: 4,067
19.09.2022, 14:46
Цитата Сообщение от BitMax Посмотреть сообщение
"переменная text не используется"
Так и есть. И это не ошибка, а предупреждение.
0
0 / 0 / 0
Регистрация: 12.05.2022
Сообщений: 3
19.09.2022, 14:59  [ТС]
Все, спасибо!!! Заррработало!!!))) Вот уж действительно: "В своем глазу соринки не замечаешь")
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
raxper
Эксперт
30234 / 6612 / 1498
Регистрация: 28.12.2010
Сообщений: 21,154
Блог
19.09.2022, 14:59
Помогаю со студенческими работами здесь

Вывод данных вложенного объекта из другого объекта
Добрый День! Хочу в одном объекте вывести текст который находится во вложенном объекте. Помогите ,пожалуйста, понять в чем ошибка. ...

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

Клонирование объекта и помещение его на страницу с сохранением координат
Здравствуйте, кто нибудь будьте добры помогите решить следующую задачу: как обычную картинку определённого размера, помещать в любое место...

Разработать интерактивную веб страницу с использованием объекта Array
Экзамен выручайте!!!Разработать интерактивную веб страницу с использованием объекта array!

Вывод объекта при движении мыши, при остановке скрытие объекта
Здравствуйте, задача заключается в том чтобы реализовать данный функционал: (Вывод объекта при движении мыши, при остановке скрытие...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
5
Ответ Создать тему
Новые блоги и статьи
сукцессия микоризы: основная теория в виде двух уравнений.
anaschu 11.01.2026
https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/
WordPad для Windows 11
Jel 10.01.2026
WordPad для Windows 11 — это приложение, которое восстанавливает классический текстовый редактор WordPad в операционной системе Windows 11. После того как Microsoft исключила WordPad из. . .
Classic Notepad for Windows 11
Jel 10.01.2026
Old Classic Notepad for Windows 11 Приложение для Windows 11, позволяющее пользователям вернуть классическую версию текстового редактора «Блокнот» из Windows 10. Программа предоставляет более. . .
Почему дизайн решает?
Neotwalker 09.01.2026
В современном мире, где конкуренция за внимание потребителя достигла пика, дизайн становится мощным инструментом для успеха бренда. Это не просто красивый внешний вид продукта или сайта — это. . .
Модель микоризы: классовый агентный подход 3
anaschu 06.01.2026
aa0a7f55b50dd51c5ec569d2d10c54f6/ O1rJuneU_ls https:/ / vkvideo. ru/ video-115721503_456239114
Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR
ФедосеевПавел 06.01.2026
Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR ВВЕДЕНИЕ Введу сокращения: аналоговый ПИД — ПИД регулятор с управляющим выходом в виде числа в диапазоне от 0% до. . .
Модель микоризы: классовый агентный подход 2
anaschu 06.01.2026
репозиторий https:/ / github. com/ shumilovas/ fungi ветка по-частям. коммит Create переделка под биомассу. txt вход sc, но sm считается внутри мицелия. кстати, обьем тоже должен там считаться. . . .
Расчёт токов в цепи постоянного тока
igorrr37 05.01.2026
/ * Дана цепь постоянного тока с сопротивлениями и источниками (напряжения, ЭДС и тока). Найти токи и напряжения во всех элементах. Программа составляет систему уравнений по 1 и 2 законам Кирхгофа и. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru