事件不会在Javascript中触发[重复]答案

【问题标题】：Event wont trigger in Javascript [duplicate]事件不会在Javascript中触发[重复]
【发布时间】：2019-03-13 17:42:40
【问题描述】：

我正在尝试只使用没有框架的 Javascript 来做一个简单的计算器。当我试图实现不同的类型来触发事件时。我无法以某种方式触发的一个事件。我想要一旦我按下清除按钮来清除文本框并重置它后面的字符串，但不知何故它不起作用。

var textfield = " ";

function retunNumber(val) {
    console.log(val);
    if (textfield != " ") {
        textfield = textfield + val;
        document.getElementById('result').value = textfield;
    } else if (textfield == " ") {
        textfield = val;
        document.getElementById('result').value = textfield;
    }
}

    document.getElementById('btn').addEventListener("click", function(){
    document.getElementById('result').value= " ";
    textfield = " ";
    });

.grid-container div
{
  display: inline-block;
}

.grid-container div.item1
{
  display: block;
}

<div class="container">

    <div class="grid-container">

        <div class="item1"> <input type="text" name="result" id="result" class="textField"> </div>
        <div> <button onclick="retunNumber(this.value)" class="btn btn-outline-dark" value="1">1</button> </div>
        <div> <button onclick="retunNumber(this.value)" class="btn btn-outline-dark" value="2">2</button> </div>
        <div> <button onclick="retunNumber(this.value)" class="btn btn-outline-dark" value="3">3</button></div>
        <div> <button onclick="retunNumber(this.value)" class="btn btn-outline-dark" value="4">4</button></div>
        <div> <button onclick="retunNumber(this.value)" class="btn btn-outline-dark" value="5">5</button></div>
        <div> <button onclick="retunNumber(this.value)" class="btn btn-outline-dark" value="6">6</button></div>
        <div> <button onclick="retunNumber(this.value)" class="btn btn-outline-dark" value="7">7</button></div>
        <div> <button onclick="retunNumber(this.value)" class="btn btn-outline-dark" value="8">8</button></div>
        <div> <button onclick="retunNumber(this.value)" class="btn btn-outline-dark" value="9">9</button></div>
        <div class="item2"> <button onclick="retunNumber(this.value)" class="btn btn-outline-dark" value="0">0</button></div>
        <div class="item5"> <button onclick="retunNumber(this.value)" class="btn btn-outline-info" value="*">*</button></div>
        <div> <button onclick="retunNumber(this.value)" class="btn btn-outline-info" value="/">/</button></div>
        <div class="item3"> <button onclick="retunNumber(this.value)" class="btn btn-outline-info" value="+">+</button></div>
        <div class="item4"> <button onclick="retunNumber(this.value)" class="btn btn-outline-info" value="-">-</button></div>
        <div> <button class="btn btn-outline-info">Equal</button></div>
        <div> <button class="btn btn-outline-info">Delete</button></div>
        <div> <button class="btn btn-outline-info" id="btn">Clear</button></div>


    </div>

</div>

欢迎提出任何改进建议。

【问题讨论】：

您的清除按钮上没有任何点击事件监听器，或者您没有向我们显示。
看来，它可以工作了：/运行sn-p代码
它对我有用。在 JS 的末尾添加了 click 事件监听器。我将代码作为 sn-p 插入，并带有一些 css 格式，以便在按下按钮后更容易点击清除按钮。
@samb102 看看js文件的底部
@Oakar 它不起作用，因为我必须按照 Nicholas 的建议在按钮之后移动脚本

标签： javascript onclick addeventlistener dom-events

【解决方案1】：

您在 javascript 中直接调用 document.getElementById。这仅在您将脚本放在页面末尾而不是页面开头时才有效，我猜这就是您放置它的位置。这是因为页面顶部的 javascript 在实际元素存在之前运行，因此无法找到它们。

或者，您可以使用来自this question 的jQuery $(document).ready 的香草替代品之一。

【讨论】：