JavaScript新手求助：点击按钮替换图片链接，未点击却已自动替换

嘿，作为JS新手遇到这种情况太正常了，我来帮你捋清楚问题出在哪以及怎么搞定它～

问题根源 #

你现在的代码之所以还没点击按钮就替换了图片链接，大概率是这两个原因之一：

1. 你在页面加载时直接调用了myFunction函数，比如脚本里直接写了myFunction('xxx', 100)，页面一加载就自动执行了；
2. 绑定点击事件的方式出错了，比如用addEventListener时直接写myFunction(参数)，这会立即执行函数，而不是等待点击触发；
   另外你的代码里还有个小语法错误：正则表达式里的斜杠没转义，//s1600/会报错，得改成/\/s1600/。

修正后的完整代码示例 #

第一步：完善你的函数（修复正则错误） #

function myFunction(parentID, size) {
  var parent = document.getElementById(parentID);
  var images = parent.getElementsByTagName('img');
  
  for (var i = 0; i < images.length; i++) {
    // 转义正则里的斜杠，匹配图片链接里的/s1600部分
    images[i].src = images[i].src.replace(/\/s1600/, "/s" + size);
    images[i].width = size;
    images[i].height = size; // 补全你没写完的height设置
  }
}

第二步：正确绑定按钮点击事件 #

下面两种方式选一种就行：

方式1：通过JS代码绑定（推荐）

先给你的按钮加个ID，比如<button id="changeImgBtn">点击换图</button>，然后在脚本里写：

// 获取按钮元素
var changeBtn = document.getElementById('changeImgBtn');

// 绑定点击事件：用匿名函数包裹你的函数调用，这样只有点击时才会执行
changeBtn.addEventListener('click', function() {
  // 这里传入你的父元素ID和想要的尺寸，比如父元素ID是"imgContainer"，尺寸设为800
  myFunction('imgContainer', 800);
});

方式2：通过HTML的onclick属性绑定

直接在按钮标签里写点击触发的代码，这样只有点击时才会调用函数：

<button onclick="myFunction('imgContainer', 800)">点击换图</button>

关键提醒 #

• 绝对不要在脚本里直接写myFunction('xxx', 100)，除非你就是想页面加载时执行；
• 正则里的特殊字符（比如斜杠）一定要转义，不然会导致语法错误。

内容的提问来源于stack exchange，提问作者nurman