如何将日期输入连接到HTML5中的图像输出

Question

我正在尝试编写代码，在该代码中，选择特定日期后，将生成带有标题的特定图像。我主要只知道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>

Answer 1

想法是您有一组列表图像，并且您已经为图像和标签做好了准备。然后使用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>