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

Question

Kirov_fury @Kirov_fury

JavaScript

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

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

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

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

Подписаться 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

+1 ещё

Простой
Почему react-hook-form не отображает ошибки zod в определенных моментах?
- 1 подписчик
- 10 минут назад
- 8 просмотров
0

ответов
JavaScript

Простой
Почему перестало работать меню?
- 1 подписчик
- вчера
- 136 просмотров
1

ответ
JavaScript

Простой
Какая логика у перебора массива таким способом?
- 1 подписчик
- вчера
- 159 просмотров
5

ответов
JavaScript

+1 ещё

Простой
Как перевести перевести top в translateY?
- 1 подписчик
- вчера
- 81 просмотр
1

ответ
JavaScript

Простой
E.target видит лишь малую область блока?
- 1 подписчик
- вчера
- 50 просмотров
0

ответов
JavaScript

Простой
Как при открытии блока закрыть предыдущий блок?
- 1 подписчик
- 20 нояб.
- 105 просмотров
0

ответов
JavaScript

Простой
Можно ли использовать Intersection Observer API для не дочерних элементов?
- 1 подписчик
- 20 нояб.
- 48 просмотров
0

ответов
JavaScript

+1 ещё

Простой
Как предотвратить работу onBlur?
- 1 подписчик
- 20 нояб.
- 63 просмотра
1

ответ
JavaScript

+2 ещё

Простой
Cypress «syntax error, unrecognized expression». Что за ошибка и как решить?
- 1 подписчик
- 19 нояб.
- 38 просмотров
1

ответ
JavaScript

+2 ещё

Средний
Как построить код, чтобы гугл таблица на сайте выдавала только значение из конкретной ячейки?
- 1 подписчик
- 19 нояб.
- 40 просмотров
0

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

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

Rocket • Смоленск

от 80 000 до 130 000 ₽

Fullstack разработчик JavaScript, php

Дорстрой-36 • Воронеж

от 100 000 до 200 000 ₽

JavaScript FullStack developer

Wanted. • Санкт-Петербург

До 220 000 ₽

Нарисовать проект Площадки для дизайнеров интерьеров

22 нояб. 2024, в 10:19

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

Сделать верстку двух страниц из фигмы

22 нояб. 2024, в 09:58

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

Доделать проект

22 нояб. 2024, в 09:57

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

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?

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

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

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