JavaScript中<a>标签href未跳转至指定链接的问题排查与修复咨询

嘿，这个问题其实是个超容易犯的小笔误！我帮你揪出来了👇

错误原因 #

看你JavaScript代码的最后一行：

document.getElementById("twitter").href = instagram;

你把Twitter链接的href赋值成了instagram变量，而不是twitter变量！这就导致不管点Instagram还是Twitter图标，都会跳转到Instagram的链接——哪怕你给twitter变量填了正确地址，也根本没被用上。

修复步骤 #

只需要把这一行的变量改成twitter就行：

document.getElementById("twitter").href = twitter;

完整修复后的JavaScript代码 #

function myFunction() {
 //put the url of the girl into the quotes of imgUrl
 var imgUrl = "https://i.mdel.net/oftheminute/images/2019/07/Jill-06.jpg"
 //put the name of the model into the quotes of modelName
 var modelName = "My Model"
 //put the link to their instagram into the quotes of instagram
 var instagram = "https://www.instagram.com/instagram"
 //put the link to their twitter into the quotes of twitter
 var twitter = "https://twitter.com/twitter"
 document.getElementById("myText").innerHTML = modelName;
 document.getElementById("myImg").src = imgUrl;
 document.getElementById("instagram").href = instagram;
 // 修正：这里改为twitter变量
 document.getElementById("twitter").href = twitter;
}

补充说明 #

你的核心思路其实完全没问题：通过ID获取元素，再用JavaScript动态设置href属性，这个方法是可行的，只是不小心在赋值时搞混了变量名。以后写代码时可以试试用更清晰的变量名（比如instagramUrl、twitterUrl），能有效减少这类笔误~

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