JS | Onload avec Onclick ne fonctionne pas ensemble - solution rapide?

Le problème réside probablement sur deux événements: onload, onclick (l'événement onload fonctionne, mais le onclick ne fonctionne pas). Comment pourrais-je résoudre ce problème de manière optimale pour que deux d'entre eux fonctionnent dans le même code? Merci pour vos suggestionsJS | Onload avec Onclick ne fonctionne pas ensemble - solution rapide?

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>

Source

2017-10-07 Adam

Dans le contexte de l'attribut onclick, la fonction click est une fonction native. Donc, votre gestionnaire de clic fonctionne, mais il appelle la fonction intégrée click, pas votre fonction de clic. Vous pouvez résoudre ce problème en renommant la fonction. Par exemple, je l'ai appelé 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>

Source

2017-10-07 16:43:09 Sidney

Une petite erreur provoque le code unuseful. Merci d'avoir découvert que le nom de la fonction est une fonction intégrée différente. Encore à apprendre:) – Adam

JS | Onload avec Onclick ne fonctionne pas ensemble - solution rapide?

Répondre

Questions connexes