JS | Onclick으로 Onload가 함께 작동하지 않습니다 - 빠른 솔루션입니까?

문제는 아마도 onload, onclick (이벤트 onload이 작동하지만 onclick은 작동하지 않음)이라는 두 가지 이벤트에 있습니다. 이 문제를 동일한 코드에서 실행하는 가장 좋은 방법으로이 문제를 어떻게 해결할 수 있습니까? 어떤 제안을 주셔서 감사합니다.JS | Onclick으로 Onload가 함께 작동하지 않습니다 - 빠른 솔루션입니까?

const vacationPlaces = ['Praha','Vien','Munich']; 
 

 
function backwards() { 
 
for (let vacationSpotIndex = vacationPlaces.length - 1; vacationSpotIndex >= 0; vacationSpotIndex--) { 
 
    let showPlaces = vacationPlaces[vacationSpotIndex] + ", "; 
 
    let removeComma = showPlaces; 
 
    document.getElementById("resultMonthly").innerHTML += removeComma; 
 
} 
 
} 
 

 
function forwards() { 
 
for (let i = 0; i < vacationPlaces.length; i++) { 
 
    document.getElementById("resultDaily").innerHTML += vacationPlaces[i] + ", "; 
 
} 
 
} 
 

 

 

 
function all() { 
 
    backwards(); 
 
    forwards(); 
 
} 
 

 
function click() { 
 
    document.getElementById("resultHourly").innerHTML = "hi"; 
 
}

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
     
 
     <meta charset="utf-8"> 
 
     <title>Issue App</title> 
 
     <link rel="stylesheet" type="text/css" href="wageup.css"> 
 
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
     
 
    </head> 
 
    <body onload="all()"> 
 
    <div class="container"> 
 
     <h2>for loop</h2> 
 
     
 
     <div class="alert alert-success" role="alert" id="resultMonthly"> 
 
     </div> 
 
     <div class="alert alert-info" role="alert" id="resultDaily"> 
 
     </div> 
 
     <div onclick="click()" class="alert alert-warning" role="alert" id="resultHourly"> 
 
     </div> 
 
     </div> 
 

 
     
 
     
 
       
 
     <!-- Scripts --> 
 
     
 
     <script src="http://chancejs.com/chance.min.js"></script> 
 
     <!-- Jquery --> 
 
     <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script> 
 
     <!-- Bootstrap --> 
 
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
 
     <!-- JS --> 
 
     <script type="text/javascript" src="forloop.js"></script> 
 
     
 
    </body> 
 
</html>

onclick 속성의 문맥에서

출처

2017-10-07 Adam

는 click 함수는 원시 함수이다. 따라서 클릭 핸들러가 작동하지만 클릭 기능이 아닌 내장 된 click 함수가 호출됩니다. 함수의 이름을 변경하여이를 수정할 수 있습니다. 예를 들어, 나는 그것을 showAlert 이름 :

const vacationPlaces = ['Praha','Vien','Munich']; 
 

 
function backwards() { 
 
    for (let vacationSpotIndex = vacationPlaces.length - 1; vacationSpotIndex >= 0; vacationSpotIndex--) { 
 
    let showPlaces = vacationPlaces[vacationSpotIndex] + ", "; 
 
    let removeComma = showPlaces; 
 
    document.getElementById("resultMonthly").innerHTML += removeComma; 
 
    } 
 
} 
 

 
function forwards() { 
 
    for (let i = 0; i < vacationPlaces.length; i++) { 
 
    document.getElementById("resultDaily").innerHTML += vacationPlaces[i] + ", "; 
 
    } 
 
} 
 

 
function all() { 
 
    backwards(); 
 
    forwards(); 
 
} 
 

 
function showAlert() { 
 
    console.log('clicked') 
 
    document.getElementById("resultHourly").innerHTML = "hi"; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <title>Issue App</title> 
 
    <link rel="stylesheet" type="text/css" href="wageup.css"> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"crossorigin="anonymous"> 
 

 
    <!-- Scripts --> 
 
    <script src="http://chancejs.com/chance.min.js"></script> 
 
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
    <!-- <script type="text/javascript" src="forloop.js"></script> --> 
 
</head> 
 

 
<body onload="all()"> 
 
    <div class="container"> 
 
    <h2>for loop</h2> 
 

 
    <div class="alert alert-success" role="alert" id="resultMonthly"></div> 
 
    <div class="alert alert-info" role="alert" id="resultDaily"></div> 
 
    <div onclick="showAlert()" class="alert alert-warning" role="alert" id="resultHourly"></div> 
 
    </div> 
 
</body> 
 
</html>

출처

2017-10-07 16:43:09 Sidney

약간의 실수가 unuseful 코드가 발생합니다. 함수의 이름이 다른 내장 함수라는 것을 알아 주셔서 감사합니다. 아직도 배우는 :) – Adam

JS | Onclick으로 Onload가 함께 작동하지 않습니다 - 빠른 솔루션입니까?

답변

관련 문제