试图使“ Enter”键调用一个函数,但实际上没有用

时间:2019-11-17 08:48:52

标签: javascript google-chrome

我正在用javascript制作一个计算器(用于练习),我这样做了,以便数字键可以输入数字,但Enter键无法完成任务。 当我按Enter键(假定等于)时,它会重置数字或计算数字,而我不知道为什么。 同样由于某种原因,它仅在镀铬上发生。 Safari可以正常使用。 附带代码,有帮助吗?

var on = false;
//Turning the Calculator on
document.querySelector("#on").addEventListener("click", function() {
    var welcome = document.querySelector("h2");
    clear();
    if (on === false) {
        on = true;
        welcome.innerHTML = "WELCOME";
        document.querySelector("#screen").style = "background-color: rgb(117, 196, 117)"
        welcome.style = "visibility: visible;";
        setTimeout(function() {
            welcome.style = "visibility: hidden;";
        }, 1000);
        setTimeout(function() {
            document.querySelector("#inner-screen").style = "visibility: visible;";
        }, 1000);
    }
});
//pressing buttons to add numbers
function addText(value) {
    var text = document.querySelector("h1").innerHTML;

    if (text === "0") {
        document.querySelector("h1").innerHTML = value;
    } else {
        document.querySelector("h1").innerHTML = text + value;
    }
}
//Using operators and moving lines
function moveLine(operator) {
    var h3Text = document.querySelector("#number").innerHTML;
    var h1Text = document.querySelector("h1").innerHTML;

    if  (h3Text === "") {
        document.querySelector("#number").innerHTML = h1Text;
        document.querySelector("#operator").innerHTML = operator;
        document.querySelector("h1").innerHTML = "0";
    } else {
        calculate("#number");
        document.querySelector("#operator").innerHTML = operator;
    }
}
//Pressing Minus to Minus a number
function minusPress() {
    var num = document.querySelector("h1").innerHTML;

    if(num === "0") {
        document.querySelector("h1").innerHTML = "-";
    } else {
        document.querySelector("#number").innerHTML = num;
        document.querySelector("#operator").innerHTML = "-";
        document.querySelector("h1").innerHTML = 0;
    }
}
//pressing period 
function periodPress() {
    var text = document.querySelector("h1").innerHTML;

    if (text === "0") {
        document.querySelector("h1").innerHTML = "0.";
    } else {
        document.querySelector("h1").innerHTML = text + ".";
    }
}
//Pressing Equals to get the results
document.querySelector("button#sum").addEventListener("click", function() {
    calculate("h1");
});
function calculate(location) {
    var firstNum = document.querySelector("#number").innerHTML;
    var secondNum = document.querySelector("h1").innerHTML;
    var operator = document.querySelector("#operator").innerHTML;

    if (operator === "+") {
        var result = +firstNum + +secondNum;
        clear();
        document.querySelector(location).innerHTML = result;
    } if (operator === "-") {
        var result = +firstNum - +secondNum;
        clear();
        document.querySelector(location).innerHTML = result;
    } if (operator === "x") {
        var result = +firstNum * +secondNum;
        clear();
        document.querySelector(location).innerHTML = result;
    } if (operator === "/") {
        var result = +firstNum / +secondNum;
        clear();
        document.querySelector(location).innerHTML = result;
    } else {console.log(this)}
}
//Pressing Clear Button
document.querySelector("#c").addEventListener("click", function() {
    document.querySelector("h1").innerHTML = "0";
})
//Pressing Clear All Button
document.querySelector("#ac").addEventListener("click", function() {
    clear();
});
//Clearing All function
function clear() {
    document.querySelector("h1").innerHTML = "0";
    document.querySelector("#number").innerHTML = "";
    document.querySelector("#operator").innerHTML = "";
}
//Turning off Calculator
document.querySelector("#off").addEventListener("click", function() {
    var goodbye = document.querySelector("h2");

    if (on === true) {
        document.querySelector("#inner-screen").style = "visibility: hidden;";
        goodbye.innerHTML = "GOODBYE";
        goodbye.style = "visibility: visible;";
        setTimeout(function() {
            goodbye.style = "visibility: hidden;";
        }, 1000)
        setTimeout(function() {
            document.querySelector("#screen").style = "background-color: rgb(136, 136, 136);";
        }, 1000);
        on = false;
    } 
});
//detecting keyboard clicks
document.addEventListener("keydown", function(){
    if (event.key === "1" ) {
        document.querySelector("#num1").click();        
    } if (event.key === "2" ) {
        document.querySelector("#num2").click();
    } if (event.key === "3" ) {
        document.querySelector("#num3").click();
    } if (event.key === "4" ) {
        document.querySelector("#num4").click();
    } if (event.key === "5" ) {
        document.querySelector("#num5").click();
    } if (event.key === "6" ) {
        document.querySelector("#num6").click();
    } if (event.key === "7" ) {
        document.querySelector("#num7").click();
    } if (event.key === "8" ) {
        document.querySelector("#num8").click();
    } if (event.key === "9" ) {
        document.querySelector("#num9").click();
    } if (event.key === "0" ) {
        document.querySelector("#num0").click();
    } if (event.key === "." ) {
        document.querySelector("#dot").click();
    } if (event.key === "Enter" ) {
        document.querySelector("#sum").click();
    } if (event.key === "+" ) {
        document.querySelector("#oPlus").click();
    } if (event.key === "-" ) {
        document.querySelector("#o-").click();
    } if (event.key === "*" ) {
        document.querySelector("#ox").click();
    } if (event.key === "/" ) {
        document.querySelector("#o/").click();
    } if (event.key === "c" ) {
        document.querySelector("#c").click();
    }
});
body {
    background-image: linear-gradient(to bottom left, rgb(0, 89, 255), rgb(2, 209, 95));
    background-repeat: no-repeat;
    background-attachment: fixed;
    text-align: center;
    font-family: 'Audiowide' ,sans-serif;
}
#main-calc {
    position: relative;
    display: inline-block;
    border-radius: 30px;
    top: 100px;
    border: 2px solid black;
    width: 450px;
    height: 650px;
    background-color: rgb(88, 88, 88);
    box-shadow: 10px 10px 20px;
}
#screen {
    background-color: rgb(136, 136, 136);
    display: inline-block;
    margin-top: 30px;
    margin-bottom: px;
    width: 90%;
    height: 110px;
    border-radius: 20px;
    text-align: center;
    position: relative;
    overflow: hidden;
}
#inner-screen {
    text-align: left;
    display: inline-block;
    width: 95%;
    height: 95%;
    visibility: hidden;
}
h3 {
    font-weight: 800;
    margin: 10px 0 0 5px   ;
    display: inline-block;
}
h1 {
    font-size: 70px;
    margin-top: 0;
    margin-left: 5px;
    margin-bottom: 0;
}
h2 {
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 60px;
    visibility: hidden;
}
button {
    font-size: 65px;
    font-weight: 800;
    text-shadow: 2px 2px 10px black;
    width: 80px;
    height: 80px;
    border-radius: 20px;
    margin-top: 7.5px;
    margin-bottom: 7.5px;
    margin-left: 7.5px;
    margin-right: 7.5px;
    background-color: rgb(36, 36, 36);
    color: white;
    border: 0;
    cursor: pointer;
    box-shadow: 0px 5px black;
    vertical-align: top;
}
.btn:active {
    margin-top: 12.5px;
    margin-bottom: 2.5px;
    box-shadow: 0px 0px;
}
.top-buttons:active {
    margin-top: 35px;
    margin-bottom: 2.5px;
    box-shadow: 0 0 0;
}
button:focus {
    outline: 0;
}

.top-buttons {
    font-size: 35px;
    margin-top: 30px;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Calculator</title>
    <link rel="stylesheet" type="text/css" href="styles/style.css">
    <link href="https://fonts.googleapis.com/css?family=Audiowide&display=swap" rel="stylesheet">
</head>
<body>
    <div id="main-calc">
        <div id="screen">
            <div id="inner-screen">
                <h3 id="number"></h3><h3 id="operator"></h3>
                <h1>0</h1>
                <h2 id="welcome"></h2>
            </div>
        </div>
        <button class="top-buttons" id="on">ON</button>
        <button class="top-buttons" id="off">OFF</button>
        <button class="top-buttons" id="ac">AC</button>
        <button class="top-buttons" id="c">C</button><br>
        <button class="btn" onclick="addText(7)" id="num7">7</button>
        <button class="btn" onclick="addText(8)" id="num8">8</button>
        <button class="btn" onclick="addText(9)" id="num9">9</button>
        <button class="btn" onclick="moveLine('/')" id="o/">/</button><br>
        <button class="btn" onclick="addText(4)" id="num4">4</button>
        <button class="btn" onclick="addText(5)" id="num5">5</button>
        <button class="btn" onclick="addText(6)" id="num6">6</button>
        <button class="btn" onclick="moveLine('x')" id="ox">X</button><br>
        <button class="btn" onclick="addText(1)" id="num1">1</button>
        <button class="btn" onclick="addText(2)" id="num2">2</button>
        <button class="btn" onclick="addText(3)" id="num3">3</button>
        <button class="btn" onclick="minusPress()" id="o-">-</button><br>
        <button class="btn" onclick="periodPress()" id="dot">.</button>
        <button class="btn" onclick="addText(0)" id="num0">0</button>
        <button class="btn" id="sum">=</button>
        <button class="btn" onclick="moveLine('+')" id="oPlus">+</button>

    </div>
    
    
    
    <script src="index.js"></script>
</body>
</html>

0 个答案:

没有答案