Question

我试图在点击某个按钮时显示一个随机文本，但是有些错误....与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>

/

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

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

newTitle();
}

Answer 1

您在()之后错过了function，并且已将newtitle 置于您的load处理程序中，使其成为非全局的，但onxyz - 属性样式的事件处理程序只能调用全局函数。（不使用它们的众多原因之一。）

相反，我建议使用现代事件处理来连接处理程序：

<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];
    }
};

还强烈建议不要使用load来解决问题，因为它在页面加载周期的后期发生非常。只需将<{1}}标记移动到后，它所处理的元素（最后一个，就在您的结束script标记之前就好了）：

</body>

...其中<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>是：

randomMessages.js

单击按钮时的JavaScript随机消息

1 个答案: