我写了一个脚本，应该通过点击一个元素来改变一个链接。但这行不通。有人能帮我吗?
<!DOCTYPE html>
<html>
<h2 id="http://www.google.com" onclick="changeLink(google);" name="google">Google</h2 >
<h2 id="http://www.yahoo.com" onclick="changeLink(yahoo);" name="yahoo">Yahoo</h2 >
<h2 id="http://www.duckduckgo.com" onclick="changeLink(duckduckgo);" name="duckduckgo">DuckDuckGo</h2 >
<a href="http://www.example.com" target="_blank" id="link">LINK</a> //should change the href after click on google, yahoo etc.
<script>
function changeLink(x){
document.getElementById('link').href=document.getElementsByName(x)[0].id;
}
</script>
</body>
</html>
不是使用表示name的字符串作为函数参数，而是使用未定义的变量。
你可以这样修改你的HTML:
<h2 id="http://www.google.com" onclick="changeLink('google');" name="google">Google</h2 >
<h2 id="http://www.yahoo.com" onclick="changeLink('yahoo');" name="yahoo">Yahoo</h2 >
<h2 id="http://www.duckduckgo.com" onclick="changeLink('duckduckgo');" name="duckduckgo">DuckDuckGo</h2 >
(注意单引号)
通过声明一个静态JSON对象来初始化值，这是实现它的最有效和最佳性能的方法。
下面是JSFiddle Demo //代码<!DOCTYPE html>
<html>
<head>
<style>
h2:hover{
color: blue;
cursor: pointer;
}
</style>
<script>
//JSON OBJECT LOADED ON DOC INIT
var sites = {
"google": "http://www.google.com",
"yahoo": "http://www.yahoo.com",
"duck": "http://www.duckduckgo.com"
};
function changeLink(site){
document.getElementById("target").href = site;
document.getElementById("target").innerHTML = site;
}
</script>
</head>
<body>
<h2 onclick="changeLink(sites.google);">Google</h2>
<h2 onclick="changeLink(sites.yahoo);">Yahoo</h2>
<h2 onclick="changeLink(sites.duck);">DuckDuckGo</h2>
<a href="http://www.example.com" target="_blank" id="target">http://www.example.com</a>
</body>
</html>