Question

所以我对JavaScript还是很陌生，所以我不能100％地确定为什么它会采用这种方式。

如果我只有我的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">&times;</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";
    }
}

和CSS https://hastebin.com/papekiyuse.css

Answer 1

问题是您的myBtn有一个onclick属性，该属性调用getData，但是在您的main.js中，您分配了 else 到btn.onclick。因此，单击按钮时，仅运行 second 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，因为它们会相互覆盖。而是使用addEventListener使用Javascript正确附加侦听器。 addEventListener允许一次事件触发多个监听器：

在您的loadData中：

const btn = document.getElementById("myBtn");
btn.addEventListener('click', getData);
function getData() {
// ...

在main.js中：

btn.addEventListener('click', () => {
  modal.style.display = "block";
});

然后从HTML中删除onclick="getData()"属性。

此外，在main.js中，您还可以考虑使用querySelector（返回单个元素）而不是使用getElementsByClassName（返回集合）：而不是

span = document.getElementsByClassName("close")[0];

您可以使用

span = document.querySelector('.close');

它更合适，并且不必要地冗长。

当我添加另一个JavaScript时，为什么我的第一个javascript停止了？

1 个答案: