Fatal编程技术网
  • javascript/
  • Javascript 如何在HTML5中将日期输入连接到图像输出

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

javascript html input

Javascript 如何在HTML5中将日期输入连接到图像输出,javascript,html,input,output,Javascript,Html,Input,Output,我正在尝试编写一个代码，在选择某个日期时，将生成带有标题的特定图像。我主要只知道HTML，我相信这需要更多的javascript知识，所以我很难做到。这就是我目前所知道的，可能是完全错误的。我是个新手，我为基本代码道歉，非常感谢你的帮助 我试着换了几行，但都没用，或者只是把事情搞得一团糟 <input type="date" id="myDate" name="value1" value="2019-04-01" min="2019-04-01" max="2019-11-07

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



这个想法是你有一组列表图像，你已经准备好了图像和标签。然后使用jascript，将侦听器添加到下拉列表中。当值更改时，您将运行一个函数来设置图像url和标题。请在下面查找代码



const date=document.getElementById（'myDate'）；
常量图像={
"2019-04-01": {
“url”：”https://www.randomlists.com/img/things/television.webp",
“标签”：“主图像”
},
"2019-04-02": {
“url”：”https://www.randomlists.com/img/things/credit_card.webp",
“标签”：“第二个日期”
}
};
date.addEventListener（'change'，（）=>{
const image=document.getElementById（'image'）；
const caption=document.querySelector（'.caption'）；
image.setAttribute（'src'，images[date.value].url）；
caption.innerHTML=图像[date.value]。标签；
});