JS |使用Onclick加载不起作用 - 快速解决方案？

问题可能出在两个事件：onload,onclick（事件onload确实有效，但onclick没有）。我怎样才能以最好的方式解决这个问题，以保持其中的两个在相同的代码中运行？感谢您的任何建议。JS |使用Onclick加载不起作用 - 快速解决方案？

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

在onclick属性的上下文中，功能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加载不起作用 - 快速解决方案？

回答

相关问题