Javascript-无法将元素Id用作字符串参数？_Javascript_Html_String

Javascript-无法将元素Id用作字符串参数？

javascript html string

Javascript-无法将元素Id用作字符串参数？,javascript,html,string,Javascript,Html,String,嘿，我正在尝试创建一个函数，它打印出从中调用它的元素id的最后一个字符。这只是一个测试，在我继续我的实际计划之前，但我被困在这里。我遇到的问题是，我得到一个错误，说我的参数是“未定义的”，因此没有传递值，或者传递的值不是字符串，因此字符串操作（charAt）对它不起作用。我已经包括了代码。多谢各位我的网页有一个未确定数量的模式图像，点击后，打开一个幻灯片相册的图像。我为1张图片制作了这张图片，然后意识到要让它为数量不确定、大小不确定的幻灯片工作，我应该制作一个填充幻灯片分区的函数。我计划让每个

嘿，我正在尝试创建一个函数，它打印出从中调用它的元素id的最后一个字符。这只是一个测试，在我继续我的实际计划之前，但我被困在这里。我遇到的问题是，我得到一个错误，说我的参数是“未定义的”，因此没有传递值，或者传递的值不是字符串，因此字符串操作（charAt）对它不起作用。我已经包括了代码。多谢各位

我的网页有一个未确定数量的模式图像，点击后，打开一个幻灯片相册的图像。我为1张图片制作了这张图片，然后意识到要让它为数量不确定、大小不确定的幻灯片工作，我应该制作一个填充幻灯片分区的函数。我计划让每个模式图片都有一个id“modal-1，modal-2…等”，并有一组数组，每个数组中的图片名称类似于“slides\u 1，slides\u 2…等”如果两者的最后一个字符匹配，那么它将用数组中的图像填充幻灯片。这样，如果我需要添加另一个模态图像，我所需要做的就是给它一个合适的id并添加一个图像数组

html:

加载

事件实际上是一个

窗口

事件，而不是

主体

上的事件，因此

此

在您的

加载

-属性样式处理程序文本中是

窗口

。要访问

body

，请使用

document.body

而不是

this

：

<body id="modal-2" onload="fillSlides(document.body.id)">

但更好的做法是通过使用现代（DOM2+）事件处理（如果您需要支持IE的过时版本，可以使用微软的专有技术）：

我将使用数据属性而不是解析字符串来实现这一点。这将允许您在HTML img元素上使用类而不是id，然后通过数据属性确定单击了哪个元素

HTML

<img data-num="1" src="https://www.yosemitehikes.com/images/wallpaper/yosemitehikes.com-bridalveil-winter-1200x800.jpg" style="max-width:100%" class="hover-shadow cursor img">

<img data-num="1" src="https://www.yosemitehikes.com/images/wallpaper/yosemitehikes.com-bridalveil-winter-1200x800.jpg" style="max-width:100%" class="hover-shadow cursor">

var classname = document.getElementsByClassName("img");

var myFunction = function() {
    var attribute = this.dataset.num;
    //attribute has the data-num value
};

for (var i = 0; i < classname.length; i++) {
    classname[i].addEventListener('click', myFunction, false);
}

var images = document.querySelectorAll('img[data-num]');

var myFunction = function() {
    var attribute = this.dataset.num;
    //attribute has the data-num value
};

for (var i = 0; i < images.length; i++) {
    images[i].addEventListener('click', myFunction, false);
}

var images=document.querySelectorAll（'img[data num]”）；
var myFunction=function（）{
var属性=this.dataset.num；
//属性具有数据num值
};
对于（var i=0；i

您尚未分享您的最终目标。完全有可能有更好的方法，因为依赖解析字符串通常不是最好/最可靠的方法。例如，您考虑过使用数据属性吗？我不知道数据属性是什么，抱歉，我是js新手。我将添加一个编辑，它说我的最终目标是您添加到HTML元素中的东西，它可以用来保存您需要的信息。例如，如果您试图确定单击了哪个元素，您可以在data属性中存储一个数字，而不是在id的末尾追加一个数字。嗯，好的，谢谢，我想这样会更好。我试试看。此外，我还为我的报告添加了更多的解释post@devlincarnate而不是使用

document.getElementsByClassName（“span”）document.queryselectoral（'span[data num]”）。通过这种方式，您只能将事件附加到具有属性data-num的范围。我只是将其放在onload中进行测试，但我确实希望在单击图像时加载该函数（请参见编辑），抱歉，我没有更好地解释。我怎么做，因为它不起作用这似乎不起作用，我做错了什么@Brownboi333：请参阅以获取解释。以下是一个工作版本：
<img data-num="1" src="https://www.yosemitehikes.com/images/wallpaper/yosemitehikes.com-bridalveil-winter-1200x800.jpg" style="max-width:100%" class="hover-shadow cursor img">

var classname = document.getElementsByClassName("img");

var myFunction = function() {
    var attribute = this.dataset.num;
    //attribute has the data-num value
};

for (var i = 0; i < classname.length; i++) {
    classname[i].addEventListener('click', myFunction, false);
}

<img data-num="1" src="https://www.yosemitehikes.com/images/wallpaper/yosemitehikes.com-bridalveil-winter-1200x800.jpg" style="max-width:100%" class="hover-shadow cursor">

var images = document.querySelectorAll('img[data-num]');

var myFunction = function() {
    var attribute = this.dataset.num;
    //attribute has the data-num value
};

for (var i = 0; i < images.length; i++) {
    images[i].addEventListener('click', myFunction, false);
}