You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

img标签onclick点击事件传参触发alert变量不生效问题排查

问题描述

我有若干张图片,希望在点击图片时执行对应代码,比如弹出alert提示当前图片的编号。
最开始的参考实现代码如下:

<img onclick="picture(1)" src="asd.jpg">
<img onclick="picture(2)" src="sdf.jpg">
<script>
   function picture(picnumber){
   alert(picnumber);
   }
</script> 

上述代码在alert字符串而非变量时可以正常运行。

补充说明

抱歉此前仅提供了示例代码而非实际运行的代码,我原以为没有问题,但给出的解决方案并未修复我的实际代码故障,我的真实代码如下:

<body>
    <style>
        img{
            height:80px;
        }
    </style>
    <script>
        function picture(picbumber){
            alert(picnumber); 
        }
    </script>
    <h1>GALLERY</h1>
    <div class="photos">
        <img onclick="picture(1)" src="https://i.insider.com/5f5a5f37e6ff30001d4e8163?width=700"/>
        <img onclick="picture(2)" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSChu52FnNKfSPRTMY8HIXei8leVAMvkURqqQ&usqp=CAU">
        <img onclick="picture(3)" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSIvgVWXKciw_UZIuzVenY4QvmCbDQb43J1lQ&usqp=CAU">
        <img onclick="picture(4)" scr="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSY9xhvbRt8gXsEyO1dOW41asBHrEb2mZkRgQ&usqp=CAU">
        <img onclick="picture(5)" src="https://dkt6rvnu67rqj.cloudfront.net/cdn/ff/T8cy0-640W8sartvA9TWmv08NbGPFxsVvf8gFtBDE08/1577112797/public/styles/600x400/public/media/int_files/elephant_in_tanzania.jpg?h=f507d761&itok=Ei8OXcGi">
        <img onclick="picture(6)" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR1u8AKJBUZdSX7SIHvd8R1SiYyypx7elpstQ&usqp=CAU">
    </div>
</body>
解决方案

你的代码存在两处拼写错误,修复即可正常运行:

  • 函数形参拼写错误:定义picture函数时形参写为picbumber,但函数内alert调用的变量是picnumber,两者拼写不一致导致变量未定义,统一拼写即可。
  • 第4张图片的资源属性拼写错误:把图片地址属性src错写为scr,导致该图片无法加载,修正属性名即可。

修复后的完整代码如下:

<body>
    <style>
        img{
            height:80px;
        }
    </style>
    <script>
        function picture(picnumber){
            alert(picnumber); 
        }
    </script>
    <h1>GALLERY</h1>
    <div class="photos">
        <img onclick="picture(1)" src="https://i.insider.com/5f5a5f37e6ff30001d4e8163?width=700"/>
        <img onclick="picture(2)" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSChu52FnNKfSPRTMY8HIXei8leVAMvkURqqQ&usqp=CAU">
        <img onclick="picture(3)" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSIvgVWXKciw_UZIuzVenY4QvmCbDQb43J1lQ&usqp=CAU">
        <img onclick="picture(4)" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSY9xhvbRt8gXsEyO1dOW41asBHrEb2mZkRgQ&usqp=CAU">
        <img onclick="picture(5)" src="https://dkt6rvnu67rqj.cloudfront.net/cdn/ff/T8cy0-640W8sartvA9TWmv08NbGPFxsVvf8gFtBDE08/1577112797/public/styles/600x400/public/media/int_files/elephant_in_tanzania.jpg?h=f507d761&itok=Ei8OXcGi">
        <img onclick="picture(6)" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR1u8AKJBUZdSX7SIHvd8R1SiYyypx7elpstQ&usqp=CAU">
    </div>
</body>

内容的提问来源于stack exchange,提问作者Adam Svoboda

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.10.01 18:57:02