单击按钮时的JavaScript随机消息_Javascript

单击按钮时的JavaScript随机消息

javascript

单击按钮时的JavaScript随机消息,javascript,Javascript,我试图显示一个随机文本时，点击一个按钮，但有点不对劲。。。。与onload.function相关的内容 <!DOCTYPE Html> <head> <meta charset="utf-8" /> <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.min.js"></script> <script type="text/j

我试图显示一个随机文本时，点击一个按钮，但有点不对劲。。。。与onload.function相关的内容

<!DOCTYPE Html>
<head>
  <meta charset="utf-8" />
  <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
  <script type="text/javascript" src="randomMessages.js"></script>
  <title>MakeHappy, One good thought everyday!</title>
  <link rel="stylesheet" href="MakeHappy.css" />
</head>

<body class="main">
      <button onclick="newTitle()">Make new title</button>
<br />
<span id="target"></span>
</body>

您缺少

函数之后的（）
，并且将newtitle
放在load
处理程序中，使其成为非全局的，但是onxyz
属性样式的事件处理程序只能调用全局函数。（不使用它们的众多原因之一。）
相反，我建议将处理程序与现代事件处理连接起来：
<button id="btn">...</button>


另外，强烈建议不要使用load
来连接东西，因为它发生在页面加载周期的后期。只需将您的脚本
标记移动到它作用于的元素之后（最后，就在关闭
标记之前，很好）：
“但有点不对劲”不是一个有用的问题陈述。你希望看到什么？您在控制台中看到任何错误吗？你自己调试过吗？--提示：您有语法错误。当我在调试控制台上点击按钮时，没有显示任何内容：未捕获引用错误：未定义newTitle我建议使用事件侦听器而不是内联onclick
。将newTitle函数移到onload函数之外removenewTitle（）在代码的底部，我认为不需要使用它，所以对您来说，最好将脚本直接托管到Html页面？@Jullian lucBarber:不，那只是因为我不知道您在回答时使用了外部文件。：-）脚本标记的位置与它是内联的还是引用单独的文件无关。我已经把它修好了。
<button id="btn">...</button>

window.onload = function() {
    // Note ------------^^

    var target = document.getElementById('target');
    var titles = [
        'Test 1',
        'Test 2',
        'Test 3',
        'Test 4',
        'Test 5'
    ];

    newTitle();

    document.getElementById("btn").addEventListener("click", newTitle, false);

    function newTitle() {
        var i = (Math.random() * titles.length) | 0;
        target.innerText = titles[i];
    }
};

<body class="main">
      <button id="btn">Make new title</button>
<br />
<span id="target"></span>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="randomMessages.js"></script>
</body>

// Scoping function to avoid creating globals
(function() {
    var target = document.getElementById('target');
    var titles = [
        'Test 1',
        'Test 2',
        'Test 3',
        'Test 4',
        'Test 5'
    ];

    newTitle();

    document.getElementById("btn").addEventListener("click", newTitle, false);

    function newTitle() {
        var i = (Math.random() * titles.length) | 0;
        target.innerText = titles[i];
    }
})(); // Execute the scoping function