如何在 HTML5 中将日期输入连接到图像输出答案

【问题标题】：How to connect date inputs to image outputs in HTML5如何在 HTML5 中将日期输入连接到图像输出
【发布时间】：2019-10-23 02:01:12
【问题描述】：

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

【问题讨论】：

标签： javascript html input output

【解决方案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>

【讨论】：