javascript onclick无法正常工作

时间:2016-10-25 16:33:33

标签: javascript javascript-events

我在使用javascript运行某个功能时出现问题。我想要发生的是我想要在用户单击按钮时触发该功能。但是,它会在页面加载时触发。

以下是整个代码:

 <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8"> 
<!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

  </head>

 <body>

<div class="container-fluid">
    <div class="row">
        <div class="col-md-2"></div>
            <div class="col-md-8">
                 <input type="submit" id="btn" value="Load">
                <div id="description">


          <div id="info">
            <h1 id="title"></h1>
            <p id="description"></p>
            <ul id="list"></ul>
          </div>
        </div>


            </div>
        <div class="col-md-2"></div>
    </div>
</div>


<script>

  var btn = document.getElementById('btn');

  var title = document.getElementById('title');
  var description = document.getElementById('description');
  var list = document.getElementById('list');


  btn.onclick = load();

  function load() {
    alert("Working.");
  }




</script>


  <!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

现在,除了发出警报框外,它显然不会做太多事情。但我稍后会通过XMLHttpRequest对象使用它来加载文件。但是现在,它没有按照应有的方式运作。

我还应该指出代码在匿名函数中运行良好,但整个想法是拥有正常的函数。我不知道为什么它可以用于匿名函数而不是正常函数。

1 个答案:

答案 0 :(得分:0)

应该是

var btn = document.getElementById('btn');
var title = document.getElementById('title');
var description = document.getElementById('description');
var list = document.getElementById('list');
btn.onclick = load;
function load() {
  alert("Working.");
}

<强> DEMO

相关问题