Как подключить ввод даты к выводу изображения в HTML5 - PullRequest
Новая
       17

Как подключить ввод даты к выводу изображения в HTML5

0 голосов
/ 23 октября 2019

Я пытаюсь написать код, в котором при выборе определенной даты будет получаться конкретное изображение с подписью. В основном я знаю только HTML, и я считаю, что для этого требуется больше знаний о JavaScript, поэтому мне трудно. Это то, что я имею до сих пор, это может быть совершенно неправильно. Я новичок в этом, я прошу прощения за основной код и большое спасибо за помощь* 

<input type="date" id="myDate" name="value1"
   value="2019-04-01"
   min="2019-04-01" max="2019-11-07">

<output name="images/1.JPG" for="value1" form="foo"</output>

1 Ответ

0 голосов
/ 23 октября 2019

Идея в том, что у вас есть набор изображений списка, и вы уже готовитесь к изображению и метке. Затем, используя jascript, вы добавляете слушателя в выпадающий список. При изменении значения вы запускаете функцию, которая устанавливает URL-адрес изображения и заголовок. Пожалуйста, найдите код ниже 

const date = document.getElementById('myDate');
const images = {
  "2019-04-01": {
    "url": "https://www.randomlists.com/img/things/television.webp",
    "label": "main-image"
  },
  "2019-04-02": {
    "url": "https://www.randomlists.com/img/things/credit_card.webp",
    "label": "second-date"
  }
};

date.addEventListener('change', () => {
  const image = document.getElementById('image');
  const caption = document.querySelector('.caption');

  image.setAttribute('src', images[date.value].url);
  caption.innerHTML = images[date.value].label;
});
<input type="date" id="myDate" name="value1" value="2019-04-01" min="2019-04-01" max="2019-11-07" />

<img src="" id="image" />
<label class="caption"></label>
...