JS | OnclickでOnloadは一緒に機能しません - 迅速なソリューション？

問題は、おそらく2つのイベントにあります：onload、onclick（イベントonloadは機能しますが、onclickは機能しません）。これらの2つを同じコードで実行する最良の方法で、この問題をどのように解決できますか？ご意見ありがとうございます。 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>

出典

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

小さなミスは役に立たないコードが発生します。関数の名前が別の組み込み関数であることを確認してくれてありがとう。まだ学んでいる:) – Adam

JS | OnclickでOnloadは一緒に機能しません - 迅速なソリューション？

答えて

関連する問題