버튼을 클릭하면 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 임의 메시지가 표시됩니다.

답변

관련 문제