0

What should be an incredibly simple button is not working. All I want is for it to log something to the console for some testing purposes, but it refuses to work.

<button type="button" id="add-marker-button">Create Marker</button>

There's the button in my HTML file, and below is the JavaScript that, as far as I can tell, should be working.

function AddMarker() {
    let latInput = document.getElementById("lat-input").value;
    let longInput = document.getElementById("lat-input").value;

    lat = parseInt(latInput);
    long = parseInt(longInput);

    console.log(`Lat: ${lat}, Long: ${long}`);
}
function PleaseWork(){
    console.log(`It works!`);
}

window.onload = function() {
    document.getElementById("add-marker-button").addEventListener("onclick", PleaseWork());
}

All I want is for the button to call the AddMarker function. I've added an even simpler function to make sure AddMarker didn't have any issues, and it still doesn't work. Without the window.onload my getElementById returns null, and I experimented with wrapping the entire code with the window.onload, that seemed to change nothing. Everything seems to work with inline JavaScript, but for some reason when accessing the button through the DOM, things stop working. The code below works fine.

<script>
    function buttonTest() {
        let latInput = document.getElementById("lat-input").value;
        let longInput = document.getElementById("lat-input").value;
        
        lat = parseInt(latInput);
        long = parseInt(longInput);
        
        console.log(`Lat: ${lat}, Long: ${long}`);
    }
</script>
<button onclick="buttonTest()">test</button>

This is really frustrating to me as it should be so simple. It's probably something obvious, but I can't figure it out for the life of me. Any help is appreciated!

krdm
  • 3
  • 1
  • 2
    Does this answer your question? [addEventListener calls the function without me even asking it to](https://stackoverflow.com/questions/16310423/addeventlistener-calls-the-function-without-me-even-asking-it-to) – Ivar Jan 26 '21 at 15:55
  • 1
    `addEventListener("onclick", PleaseWork());` should just be `addEventListener("onclick", PleaseWork);` without the `()` after `PleaseWork`. You want to pass a callback to `addEventListener` not the result of running the function – phuzi Jan 26 '21 at 15:57
  • Also `onclick` should be `click` when you pass it to `addEventListener`. – Ivar Jan 26 '21 at 15:58
  • That's a good catch, and I'm sure it fixed part of it, but it still doesn't seem to work – krdm Jan 26 '21 at 16:09
  • @krdm [Seems to work fine](https://jsfiddle.net/1q7z2dk6/) with those fixes. – Ivar Jan 26 '21 at 16:12
  • Doesn't work for me. There must be something else going on, but I'm not sure what it would be as this code shouldn't really be affected by anything other than what I've shared – krdm Jan 26 '21 at 16:20
  • It's working now. Entirely my bad. I had another script linked to the HTML file that contained some outdated code that was breaking it. Thanks for the help! – krdm Jan 26 '21 at 16:28

1 Answers1

1

 function AddMarker() {
    let latInput = document.getElementById("lat-input").value;
    let longInput = document.getElementById("lat-input").value;

    lat = parseInt(latInput);
    long = parseInt(longInput);

    console.log(`Lat: ${lat}, Long: ${long}`);
}
function PleaseWork(){
    alert('It Works');
    console.log(`It works!`);
}

window.onload = function() {
    document.getElementById("add-marker-button").addEventListener("click", PleaseWork);
}
 
<button type="button" id="add-marker-button">Create Marker</button>

   
 window.onload = function() {
    
       document.getElementById("add-marker-button").addEventListener("click", PleaseWork);
    
    }
Pavan Singh
  • 76
  • 6
  • That's a good catch, but doesn't seem to fully solve the problem, the button still doesn't work – krdm Jan 26 '21 at 16:18
  • I have added code snippet. It's working fine. Please check. If you want to call AddMarker() instead of PleaseWork() then use document.getElementById("add-marker-button").addEventListener("click", AddMarker); – Pavan Singh Jan 26 '21 at 16:24
  • It's working now. Entirely my bad. I had another script linked to the HTML file that contained some outdated code that was breaking it. Thanks for the help! – krdm Jan 26 '21 at 16:28