点击DIV修改PHP页面URL时出现未定义URL错误的技术求助

嘿，我来帮你排查下问题所在，你遇到的错误主要有两个核心原因：

问题分析 #

• this指向跑偏了：你在changeUrl()函数里用了this.href，但当你直接调用这个函数时，this指向的是全局的window对象，不是你点击的div元素。window根本没有href属性，自然会报URL未定义的错。
• Div不支持原生href属性：div是块级元素，本身就没有href这个原生属性，就算你硬给它加上，直接通过元素获取href也不符合HTML规范，很容易出问题。

修复方案 #

我们可以用自定义属性存储目标URL，同时修正this的指向，下面是修改后的完整代码：

首先调整你的div标签，把href换成符合规范的自定义属性data-href：

<div id="right-btn" data-href="你的目标页面URL">点击跳转</div>

然后修改JavaScript脚本：

var Pokemon_ID = 1;
document.getElementById('right-btn').onclick = function() {
  // 获取div上存储的目标URL
  var targetUrl = this.getAttribute('data-href');
  // 拼接新URL并跳转，加个判断避免空URL跳转
  if (targetUrl) {
    location.href = targetUrl + '?id=' + Pokemon_ID;
  } else {
    console.log('请设置正确的目标URL哦');
  }
};

为什么这样改？ #

• 使用data-href是HTML5推荐的自定义属性写法，专门用来存储元素的自定义数据，比硬给div加href更规范，也不容易出兼容问题。
• 在点击事件的回调函数里，this直接指向被点击的div元素，这样就能准确获取到我们存储的目标URL了。
• 加了if (targetUrl)的判断，可以避免目标URL为空时出现无效跳转的情况，调试也更方便。

如果你还是想用单独的changeUrl函数，也可以这么写：

var Pokemon_ID = 1;
function changeUrl(element) {
  var targetUrl = element.getAttribute('data-href');
  if (targetUrl) {
    location.href = targetUrl + '?id=' + Pokemon_ID;
  }
}

document.getElementById('right-btn').onclick = function() {
  // 把当前点击的元素传给changeUrl函数
  changeUrl(this);
};

这样修改后，点击div就能正常跳转并带上?id=1的参数啦～

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