Question

我正在尝试仅使用不带框架的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>

任何关于改进的建议都会受到欢迎。

Answer 1

您正直接在JavaScript中调用document.getElementById。仅当您将脚本放在页面的末尾而不是页面的开始（我猜是在页面的开始）时，这才起作用。这是因为页面顶部的javascript是在实际元素存在之前运行的，因此找不到它们。

或者，您可以使用this question中jQuery的$(document).ready的一种替代方法。

事件不会在Javascript中触发

1 个答案: