时间戳

首页 > 解决方案 > 非常简单的 HTML/JavaScript 按钮不起作用

javascript - 非常简单的 HTML/JavaScript 按钮不起作用

问题描述

应该是一个非常简单的按钮不起作用。我想要的只是为了某些测试目的将某些内容记录到控制台，但它拒绝工作。

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

我的 HTML 文件中有一个按钮，下面是 JavaScript，据我所知，它应该可以工作。

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());
}

我想要的只是让按钮调用 AddMarker 函数。我添加了一个更简单的函数来确保 AddMarker 没有任何问题，但它仍然无法正常工作。如果没有window.onload，我的getElementById 返回null，我尝试用window.onload 包装整个代码，这似乎没有任何改变。一切似乎都可以使用内联 JavaScript，但由于某种原因，当通过 DOM 访问按钮时，事情停止工作。下面的代码工作正常。

<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>

这对我来说真的很令人沮丧，因为它应该如此简单。这可能是显而易见的，但我一生都无法弄清楚。任何帮助表示赞赏！

标签： javascripthtmldombutton

解决方案

 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);
    
    }

推荐阅读