ボタンをクリックするとJavaScriptのランダムメッセージが表示されます

-1

ボタンをクリックするとランダムなテキストを表示しようとしていますが、何かが間違っています.... onload.functionに関連するものがありますか？ボタンをクリックするとJavaScriptのランダムメッセージが表示されます

<!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(); 
}

出典

2016-10-13 Jullian-luc Barber

：randomMessages.jsがある

<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>

... 「何かが間違っている」というのは、有用な問題ではありません。あなたは何を見たいですか？コンソールにエラーが表示されますか？あなた自身でデバッグをしましたか？ ---ヒント：構文エラーがあります。 – evolutionxbox

デバッグコンソールのボタンを押したときに何も表示されません。Uncaught ReferenceError：newTitleが定義されていません –

インラインonclickの代わりにイベントリスナーを使用することをお勧めします。 – evolutionxbox

あなたはfunction後()を逃している、とあなたはそれが非グローバル作り、あなたloadハンドラ内newtitleを入れてきましたが、onxyz -attribute形式のイベントハンドラはグローバル関数のみを呼び出すことができます。（それらを使用しない多くの理由の一つ。）

代わりに、私は現代のイベント処理でハンドラをフック勧め：

<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を使用していない場合は、ページロードサイクルの最後で非常にとなります。ただ、それが作用する要素の後にご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

出典

2016-10-13 10:40:31

あなたのために直接HTMLページにスクリプトをホストする方が良いですか？ –

@ Jullian-lucBarber：いいえ、それは答えている間にあなたが外部ファイルを使用したことを忘れてしまったということでした。 :-) scriptタグは、インラインであるか別ファイルを参照しているかには関係ありません。私は上にそれを修正しました。 –

ボタンをクリックするとJavaScriptのランダムメッセージが表示されます

答えて

関連する問題