Pешение задачи html js?

Question

Kirov_fury @Kirov_fury

JavaScript

Pешение задачи html js?

Помогите найти простое решение задачи. Только изучаю html и js и встал в ступор.
Задача:
Создать кнопку при нажатии на которую появится картинка того или иного предмета, название которого вы запишете в input. Выберите примерно 3-4 картинки.

Вопрос задан более трёх лет назад
153 просмотра

Комментировать

Подписаться 1 Простой Комментировать

Решения вопроса 1

4 комментария

Kirov_fury @Kirov_fury Автор вопроса

Сделал все как у вас. Все равно не работает ((

Написано более трёх лет назад
Absolute138 @Absolute138

Kirov_fury, https://jsbin.com/gusurekeki/edit?html,js,output

Написано более трёх лет назад

Kirov_fury @Kirov_fury Автор вопроса

Absolute138, izvinyaus no ne mogli bi vi posmotret' kod

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <script type="text/javascript" src="myscript2.js"></script>
  <title>JS Bin</title>
</head>
<body>
  <input type="text" id="myinput">
  <input type="button" id="mybutton" value="Взять картинку">
</body>
</html>

let things = {
  'car' : '‪C:\Users\Administrator\Downloads\Sublime Text Build 3211 x64\Zadanie4\car.jpg',
  'house': 'C:\Users\Administrator\Downloads\Sublime Text Build 3211 x64\Zadanie4\house.jpg',
  'plane': 'C:\Users\Administrator\Downloads\Sublime Text Build 3211 x64\Zadanie4\plane.jpg'
}
document.getElementById('mybutton').addEventListener('click',()=>{
   let val = document.getElementById('myinput').value.toLowerCase().trim();
   if(val in things){
      let img = document.createElement('img');
      img.src = things[val];
      document.body.appendChild(img);
   } else {
      alert('нэээт такой вещ!');
   }
});

Написано более трёх лет назад

Absolute138 @Absolute138

Kirov_fury,

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <script type="text/javascript" src="myscript2.js"></script>
  <title>JS Bin</title>
</head>
<body>
  <input type="text" id="myinput">
  <input type="button" id="mybutton" value="Взять картинку">
  <script>
  let things = {
  'car' : 'C:\Users\Administrator\Downloads\Sublime Text Build 3211 x64\Zadanie4\car.jpg',
  'house': 'C:\Users\Administrator\Downloads\Sublime Text Build 3211 x64\Zadanie4\house.jpg',
  'plane': 'C:\Users\Administrator\Downloads\Sublime Text Build 3211 x64\Zadanie4\plane.jpg'
}
document.getElementById('mybutton').addEventListener('click',()=>{
   let val = document.getElementById('myinput').value.toLowerCase().trim();
   if(val in things){
      let img = document.createElement('img');
      img.src = things[val];
      document.body.appendChild(img);
   } else {
      alert('нэээт такой вещ!');
   }
});
  </script>
</body>
</html>

Написано более трёх лет назад

Пригласить эксперта

Ответы на вопрос 2

3 комментария

Тимофей @timofeygusevopal

по умолчанию у обьекта css стиль должен быть visibility:hiden;

Написано более трёх лет назад
Alex @Kozack Куратор тега JavaScript

переключались стили в жс, на то что бы элемент был виден, и обратно,

не учите людей плохому.
Чтобы програмно скрывать/показывать что-то рекомендую использовать https://www.w3schools.com/tags/att_hidden.asp

<img hidden> картинка по-умолчанию скрыта

imgElement.hidden = false // Отобразить картинку
И не страдайте фигнёй изменяя стили

Написано более трёх лет назад
Тимофей @timofeygusevopal

Alex, спасибо, значит сам всегда неправильно делал))) благодарю, полезно

Написано более трёх лет назад

Комментировать

Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации

Похожие вопросы

JavaScript

+3 ещё

Простой
Как стилизовать пагинацию постов по определённому признаку?
- 1 подписчик
- 19 часов назад
- 68 просмотров
1

ответ
JavaScript

+2 ещё

Простой
Как отобразить массив из элементов?
- 1 подписчик
- 19 часов назад
- 87 просмотров
0

ответов
JavaScript

+1 ещё

Простой
Неизвестные скрипты на сайте (plupload и moxie). Для чего?
- 1 подписчик
- вчера
- 107 просмотров
1

ответ
JavaScript

+2 ещё

Простой
Как сделать так, чтобы звезда падала только при скролле страницы?
- 1 подписчик
- вчера
- 80 просмотров
0

ответов
JavaScript

+1 ещё

Простой
Почему вылезает второй слайд?
- 1 подписчик
- вчера
- 38 просмотров
1

ответ
JavaScript

Простой
Почему в букмарклете должным образом не выполняется Alt + Click?
- 1 подписчик
- вчера
- 46 просмотров
1

ответ
JavaScript

Средний
Как создать кроссбраузерный функиональный плеер?
- 1 подписчик
- вчера
- 66 просмотров
0

ответов
JavaScript

+1 ещё

Средний
Почему функция mnemonicToWalletKey из библиотеки тон генерирует неверный адрес кошелька?
- 1 подписчик
- вчера
- 48 просмотров
1

ответ
JavaScript

+1 ещё

Простой
Как передавать данные гугл таблицы в телеграм при добавлении новой записи?
- 1 подписчик
- вчера
- 63 просмотра
1

ответ
JavaScript

Простой
Проблема с добавлением полей товара в куки, почему-то при клике ничего в куки не записывает, что делать?
- 1 подписчик
- вчера
- 33 просмотра
2

ответа
Показать ещё Загружается…

JavaScript разработчик

summer • Ярославль

от 100 000 до 140 000 ₽

Junior JavaScript Developer

КРАФТТЕК • Санкт-Петербург

от 60 000 до 80 000 ₽

JavaScript разработчик

Мэтч

от 80 000 ₽

Сделать мобильную версию сайта Next.js/React

19 апр. 2024, в 11:54

500 руб./в час

Реализовать Парсер сайта

19 апр. 2024, в 11:48

10000 руб./за проект

Собрать сайт на Vue / Laravel

19 апр. 2024, в 11:14

65000 руб./за проект

Answer 1 · 2020-10-13 16:50:00

<input type="text" id="myinput">
  <input type="button" id="mybutton" value="Взять картинку">

let things = {
  'ручка' : 'http://site.ru/ruchka.jpg',
  'карандаш': 'http://site.ru/karandash.jpg',
  'ластик': 'http://site.ru/lastik.jpg'
}
document.getElementById('mybutton').addEventListener('click',()=>{
   let val = document.getElementById('myinput').value.toLowerCase().trim();
   if(val in things){
      let img = document.createElement('img');
      img.src = things[val];
      document.body.appendChild(img);
   } else {
      alert('нэээт такой вещ, извини брааат');
   }
});

Answer 2 · 2020-10-13 16:25:05

При нажатии на инпут , открывается картинка, мы должны сделать так что бы при нажатии, переключались стили в жс, на то что бы элемент был виден, и обратно, нужно подключится к элементу в помощью дом дерева, и прописать событие, примерно такая логика

Answer 3 · 2020-10-13 16:40:29

Можно сравнивать заранее прописанные переменные по типу "картинка1, картинка2" с веденным текстом в инпуте, при соответствии текста нажатие кнопки вызывает отображение картинки которая находится под этим номером.

Pешение задачи html js?

Войдите, чтобы написать ответ

Минуточку внимания

Войдите на сайт