javascript/html：如何使用 document.getElementById 更改 onclick=location.herf答案

【问题标题】：javascript/html: How do I change onclick=location.herf using document.getElementByIdjavascript/html：如何使用 document.getElementById 更改 onclick=location.herf
【发布时间】：2014-02-11 22:20:03
【问题描述】：

我正在努力使用正确的语法来更改使用 javascript 转到 onclick 的链接。

我有：

js:

function changeLink {
link = "page2.php";
document.getElementById('go').onclick= function() { location.href(link); };
}

html:

<button type="submit" name="submit1" style="width:100%;height:30px" onclick="changeLink();">Change Place To Go</button>
<div id="go" onclick="document.location.href='page1.php';">Click to go somewhere</div>

JS fiddle

感谢您的任何建议！

【问题讨论】：

标签： onclick href

【解决方案1】：

让我们从一些common.js开始：

//<![CDATA[
var doc = document, bod = doc.body;
var IE = parseFloat(navigator.appVersion.split('MSIE')[1]);
bod.className = 'js';
function gteIE(version, className){
  if(IE >= version){
    bod.className = className;
  }
}
function E(e){
  return doc.getElementById(e);
}
//]]>

现在让我们做你的主页，index.php：

//<![CDATA[
function direct(id, link){
  E(id).onclick = function(){
    location = link;
  }
}
direct('button1', 'page1.php'); direct('button2', 'page1.php');
//]]>

HTML 看起来更像：

<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>
  <head>
    <meta http-equiv='content-type' content='text/html;charset=utf-8' />
    <style type='text/css'>
      @import 'common.css'; @import 'index.css';
    </style>
  </head>
<body class='njs'>
  <div id='main'>
    <input type='button' id='button1' value='button 1' />
    <input type='button' id='button2' value='button 2' />
  </div>
  <script type='text/javascript' src='common.js'></script>
  <script type='text/javascript' src='index.js'></script>
</body>
</html>

common.css 上的 CSS：

body{
  margin:0;
}
#main{
  width:980px; margin:0 auto;
}

index.css 上的 CSS：

#button1,#button2{
  height:30px; width:300px;
}

注意：

您可以使用 CSS class 代替逗号分隔的 ids。这只是为了向您展示语法应该是什么样子。你应该知道onclick在表单提交之前触发，因此重定向会在提交之前发生，所以使用submit按钮是没有意义的。除非您能解释原因，否则在您的案例中使用表格确实没有意义。我只会使用<a href='page1.php'>page 1</a> 之类的，所以你甚至不需要使用 JavaScript。您可以使用 CSS 将链接设置为按钮样式。

【讨论】：

我会在哪里写这个？