Mar*_*nom 3 html javascript css jquery
所以我对JavaScript很新,所以我不是百分之百确定它为什么会这样做.
如果我只有我的loadData.js它工作正常,但只要我将main.js添加到html文档,它似乎跳过loadData.js或者只是忽略它们,我不知道为什么.
我知道getData工作我尝试打印出没有图片中的main.js的数据,它工作得很好.再次看起来它只是在我添加main.js时跳过使用它
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>DummyPage</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="/css/style.css" />
</head>
<body>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<p>Please Select A Item</p>
<select id="itemSelect">
</select>
</div>
</div>
<div class="mainBackground">
<a id="myBtn" href="#" class="helmButtonStyle" onclick="getData()"></a>
</div>
</body>
<script src="/js/loadData.js"></script>
<script src="/js/main.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</html>
loadData
function getData() {
console.log("Hej");
$.getJSON('http://localhost:53209/api/items', function (data) {
var html = '';
var len = data.length;
for (var i = 0; i < len; i++) {
html += '<option = value"' + data[i].Name + '">' + data[i].Name + '</option>';
}
// console.log(html);
$('itemSelect').append(html);
});
}
main.js
var modal = document.getElementById('myModal');
// Get the button that opens the modal
var btn = document.getElementById("myBtn");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks the button, open the modal
btn.onclick = function() {
modal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
问题是,你myBtn有onclick它调用属性getData,但随后你的main.js,你分配一些别的来btn.onclick.因此,单击该按钮时,只有第二个 按钮onclick运行:
function getData() {
console.log('getting data');
}
var btn = document.getElementById("myBtn");
btn.onclick = function() {
console.log('onclick');
}<a id="myBtn" href="#" class="helmButtonStyle" onclick="getData()">click me</a>简单的解决方案:不要使用内联侦听器(无论如何都是不好的练习),并且不要分配.onclick,因为那些会相互覆盖.相反,使用addEventListenerJavascript正确附加侦听器.addEventListener允许一次从一个事件触发多个侦听器:
在你的loadData:
const btn = document.getElementById("myBtn");
btn.addEventListener('click', getData);
function getData() {
// ...
在main.js:
btn.addEventListener('click', () => {
modal.style.display = "block";
});
并onclick="getData()"从HTML中删除该属性.
此外,main.js您还可以考虑使用querySelector(返回单个元素)而不是使用getElementsByClassName(返回集合):而不是
span = document.getElementsByClassName("close")[0];
您可以使用
span = document.querySelector('.close');
它更合适,而且不必要地冗长.