Javascript 向隐藏的文本框添加值

每当执行

drawX

时，我试图向隐藏的文本框添加一个图像id值，并在执行

clear

时将其设为空。我的程序的工作方式是一次只能在一张图像上画一个x。因此，每当选择该图像时，它都会将该图像的id发送到我用id

sendServ

命名的隐藏文本框。按照我现在编写的方式，我不认为id是传递给我的

OptionClick

函数中的

drawX

函数的。我不太清楚如何让它工作。也许使用EventListener有更简单的方法，但我不确定。任何帮助都将不胜感激，谢谢

编辑：我决定添加一个带有虚拟数组的代码段，这样可以更容易地帮助我

let索引=0；
var hdnName=document.getElementById（“sendServ”）；
const display=“表格”//如果是水平的，则为“网格”，但这可能取决于代码其余部分的放置位置，因为我在主体中添加了样式
常数x=0；
常数y=0；
常量图像={
身高：50，
宽度：50，
网址：[
"https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fupload.wikimedia.org%2Fwikipedia%2Fen%2F8%2F84%2FAssociation_of_Gay_and_Lesbian_Psychiatrists_logo.jpg&f=1&nofb=1",
"https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fstatic01.nyt.com%2Fnewsgraphics%2F2016%2F07%2F14%2Fpluto-一年期%2资产%2图标pluto.png&f=1&nofb=1“，
"https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse4.mm.bing.net%2Fth%3Fid%3DOIP.oFxADNN67dYP-ke5xg7HbQHaHG%26pid%3DApi&f=1“，
"https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fmedia.glassdoor.com%2Fsqll%2F1065746%2Felevation-church-squarelogo-1453223965790.png&f=1&nofb=1“
],
id:[0,1,2,3]
};
函数createHTML（）{
log（“E:Execute&R:Request&I:Informative”）；
//循环以实现所有图像
document.body.style.display=显示；
for（图像的const image.url）{
//每个图像将对应一个画布元素
const canvas=document.createElement（“canvas”）；
const ctx=canvas.getContext（“2d”）；
//每个画布元素都有自己的属性（在本例中，所有属性都相同）
canvas.id=“option”+[index]；
canvas.height=images.height；
canvas.width=images.width；
canvas.style.padding=“10px”；
//函数获取特定画布元素的对应图像
绘画图像（画布）；
//为用户单击特定画布时添加事件侦听器
canvas.addEventListener（“单击”，optionClick，false）；
//所有html部分都是句柄，我们可以将其附加到正文中
document.body.appendChild（画布）；
索引++；
}
}
函数drawImages（画布）{
//我们需要使用getContext canvas函数在canvas元素中绘制任何内容
const ctx=canvas.getContext（“2d”）；
const background=新图像（）；
//这是必需的，因为如果从其他位置调用drawImage，则createHTML函数
//索引值不会为0，并且它肯定会使用预期的更高id
//因此，我们使用正则表达式从canvas.id中删除所有字母，并获取稍后使用的数字
index=canvas.id.replace（/\D/g，“”）；
//console.log（'E:Drawing image'+index+'on canvas'+canvas.id）；
//使用索引获取图像url以获取对应的图像
background.src=images.url[index]；
//不知道为什么，但要放置图像，我们需要使用onload事件
//https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/drawImage
background.onload=函数（）{
ctx.drawImage（背景、0、0、canvas.width、canvas.height）；
};
}
函数drawX（画布、项目）{
const ctx=canvas.getContext（“2d”）；
//log（“E：在画布上放置X”+canvas.id）；
ctx.beginPath（）；
ctx.moveTo（0,0）；
ctx.lineTo（图像.宽度，图像.高度）；
ctx.moveTo（images.height，0）；
ctx.lineTo（0，图像宽度）；
ctx.closePath（）；
ctx.stroke（）；
hdnName.value=项目；
}
功能清除（画布）{
//console.log（“E:清除画布”+canvas.id）；
canvas.getContext（“2d”）.clearRect（0,0，canvas.width，canvas.height）；
绘画图像（画布）；
hdnName.value=null；
}
功能选项点击（e）{
log=真；
var指数=0；
const canvas=document.getElementsByTagName（“画布”）；
for（画布的const选项）{
如果（日志）
log（“I：用户在选项“+e.target.id+”：“+option.id”处单击）；
log=false；
if（e.target.id==option.id）{
//log（'R：画布上的绘图请求'+option.id）；
var item=images.id[index]；
控制台日志（项目）；
提款（期权、项目）；
}否则{
//log（'R：画布上的清除请求'+option.id）；
明确（选项）；
}
索引++；
}
}
//我们首先调用createHTML（它将处理所有HTML元素）
window.onload=createHTML
canvas.suiteiCanvas{
高度：自动；
宽度：自动；
最大高度：200px；
最大宽度：150px；
左边距：100px；
右边距：100px；
边框：3倍实心rgb（20,11,11）；
}
#绘制btn{
字体大小：14px；
填充：2x16px 3x16px；
边缘底部：8px；
}
img.new{
高度：自动；
宽度：自动；
最大高度：200px；
最大宽度：150px；
左边距：100px；
右边距：100px；
边框：3倍实心rgb（20,11,11）；
}
“我不认为id会在OptionClick函数中传递给drawX函数。”-你到底怎么想的？您所要做的就是将
项
参数的值记录到
drawX
内部的控制台中，以查看您在这里是否出错-它确实可以通过。只要您取消注释
//hdnName.value=item，从0到3的值开始出现在文本字段中，当单击图像时…如果这不是您想要的，那么我就不明白您在这里提出的问题。不管怎样，我看到了我的问题。我正在添加使hdnName.value=null；当我