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

Question

So I am fairly new to JavaScript so I am not 100% sure to why it's behaving this way. 所以我对JavaScript很新，所以我不是百分之百确定它为什么会这样做。

If I only have my loadData.js it's working fine but as soon as I add main.js to the html document it seems to skip loadData.js or just ignore it all together and I have no idea why. 如果我只有我的loadData.js它工作正常，但只要我将main.js添加到html文档，它似乎跳过loadData.js或者只是忽略它们，我不知道为什么。

I know that getData works I tried printing out the data without the main.js in the picture and it worked just fine. 我知道getData工作我尝试打印出没有图片中的main.js的数据，它工作得很好。 Again it seems like it just skips using it as soon as I add 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 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 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";
    }
}

and the css https://hastebin.com/papekiyuse.css 和css https://hastebin.com/papekiyuse.css

Answer 1

The problem is that your myBtn has an onclick attribute which calls getData , but then in your main.js , you assign something else to btn.onclick . 问题是你的myBtn有一个调用getData的onclick属性，但是在你的main.js ，你将其他东西分配给btn.onclick 。 So, when the button is clicked, only the second onclick runs: 因此，单击该按钮时，仅运行第二个 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>

Easy solution: don't use inline listeners (they're bad practice anyway), and don't assign to .onclick , because those overwrite each other. 简单的解决方案：不要使用内联侦听器（无论如何都是不好的练习），并且不要分配给.onclick ，因为那些会相互覆盖。 Instead, use addEventListener to attach listeners properly using Javascript. 相反，使用addEventListener使用Javascript正确附加侦听器。 addEventListener allows for more than one listener to be triggered from an event at a time: addEventListener允许一次从一个事件触发多个侦听器：

In your loadData : 在你的loadData ：

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

In main.js : 在main.js ：

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

And remove the onclick="getData()" attribute from the HTML. 并从HTML中删除onclick="getData()"属性。

Also, in main.js , you also might consider using querySelector (which returns a single element) rather than using getElementsByClassName (which returns a collection): instead of 另外，在main.js ，您还可以考虑使用querySelector （返回单个元素）而不是使用getElementsByClassName （返回集合）：而不是

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

you can use 您可以使用

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

It's a bit more appropriate, and less unnecessarily verbose. 它更合适，而且不必要地冗长。

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

问题描述

1 个解决方案

解决方案1
7 2018-10-07 03:44:53

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

问题描述

1 个解决方案

解决方案1 7 2018-10-07 03:44:53

解决方案1
7 2018-10-07 03:44:53