CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Mark Denom
Mark Denom

Reputation: 1057

Why does my first javascript stop when I add another one?

So I am fairly new to JavaScript so I am not 100% sure to why it's behaving this way.

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.

I know that getData works I tried printing out the data without the main.js in the picture and it worked just fine. Again it seems like it just skips using it as soon as I add 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";
    }
}

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

Upvotes: 3

Views: 398

Answers (1)

CertainPerformance
CertainPerformance

Reputation: 370699

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. So, when the button is clicked, only the second onclick runs:

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. Instead, use addEventListener to attach listeners properly using Javascript. addEventListener allows for more than one listener to be triggered from an event at a time:

In your loadData:

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

In main.js:

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

And remove the onclick="getData()" attribute from the HTML.

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

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

you can use

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

It's a bit more appropriate, and less unnecessarily verbose.

Upvotes: 7

Related Questions