嘗試用JavaScript編碼計算器

Question

經過數小時的輸入並嘗試修正我的代碼后，我才為學校分配了一個計算器。 它仍然無法正常工作，我希望有人可以發現我的錯誤。

 function myStory() { window.alert ("Very doge"); } // Als de pagina laadt: laad de query $(document).ready(function(){ // Onthoud de input van de gebruiker om later te gebruiken var inputs=[""]; // Onthoud de input van de gebruikers die eerst word ingetypt. var totalString; // Operator array voor validatie geheugen var operators1 = ["Mc", "M+", "M-", "MR"]; // Operator array voor validatie zonder '.' Zo kan er niet bijv. 2x ++ // worden ingevuld var operators2 = ["+", "-", "/", "X", "+/-"]; // Operators arrat voor validatie met de '.' var operators3 = ["."]; // Nummers voor validatie var numbers = [0,0,1,2,3,4,5,6,7,8,9]; //Functie om alles te updaten // ALS er een punt in zit, dan wordt er gekeken of het er maar 1 is en niet // meerdere, anders krijg je de error: Duplicate function getValue(input){ if(operators3.includes(inputs[inputs.length-1]) === true && input === "."){ window.alert("Duplicate '.' "); } else if (inputs.length === 1 && operators2.includes(input) === false){ inputs.push(input); } else if(operators2.includes(inputs[inputs.length-1]) === false){ inputs.push(input); } else if (numbers.includes(Number(input))){ inputs.push(input); } update(); } //Functie om de display te updaten function update(){ totalString = inputs.join(""); $("#display").html(totalString); console.log(inputs); } //Functie om het totaal te berekenen bijv. 8+6-4 wordt ingevuld // Dit wordt dan in 1x berekend. Het wordt zegmaar ge-evalueerd function getTotal(){ totalString = inputs.join(""); $("#display").html(eval(totalString)); } //Wanneer er op een button wordt geklikt, voer dan de functie uit. $("input").on("click", function(){ if (this.id === "C"){ inputs=[""]; update(); } else if (this.id === "="){ getTotal(); } else { if(inputs[inputs.length-1].indexOf("+", "-", "/", "X", "+/-") === -1){ getValue(this.id); } else { getValue(this.id); } } }); }); 

 body { font-family: 'Titillium Web', Helvetica, sans-serif; font-weight: 600; background-color: #f4f4f4; } #container { position: relative; width: 400px; height: 600px; background-color: #FFFFFF; margin: 0px auto; border-radius: 15px; box-shadow: 20px 40px 45px -4px rgba(0,0,0,0.05); } form[name="calculator"] { width: 320px; margin: 0 auto; margin-top: 50px; } #answer { font-family: 'Titillium Web', Helvetica, sans-serif; font-weight: 600; background-color: #FFFFFF; border: none; margin-top: 1em; width: 320px; height: 50px; padding-top: 50px; } #display { padding-left: 300px; font-size: 2em; } .line { width: 320px; height: 1px; background-color: #c3c3c3; } input[type="button"] { font-family: 'Titillium Web', Helvetica, sans-serif; font-weight: 600; width: 65px; height: 65px; margin-left: 10px; margin-top: 10px; border: none; background-color: #FFFFFF; color: #525252; font-size: 1.1em; } input[type="button"]:hover { border: none; color: #f67474; cursor: pointer; } input.numbers { color: #9d9d9d; } input.red { color: #f67474; } input.red:hover { color: #525252; } /* Memes */ p { color: #9d9d9d; float: left; } input.m1 { float: left; margin-left: 150px; margin-top: 80px; position: absolute; width: 160px !important; background-color: inherit; /* Chrome, Safari, Opera */ -webkit-animation: rainbow 2s infinite; } input.m2 { margin-left: 250px; margin-top: 250px; position: absolute; width: 160px !important; background-color: inherit; /* Chrome, Safari, Opera */ -webkit-animation: rainbow 2s infinite; } input.m3 { margin-left: 1100px; margin-top: 140px; position: absolute; width: 160px !important; background-color: inherit; /* Chrome, Safari, Opera */ -webkit-animation: rainbow 2s infinite; } input.m4 { margin-left: 1000px; margin-top: 400px; position: absolute; width: 160px !important; background-color: inherit; /* Chrome, Safari, Opera */ -webkit-animation: rainbow 2s infinite; } input.m5 { margin-left: 150px; margin-top: 450px; position: absolute; width: 160px !important; background-color: inherit; /* Chrome, Safari, Opera */ -webkit-animation: rainbow 2s infinite; } input.m6 { margin-left: 1200px; margin-top: 340px; position: absolute; width: 160px !important; background-color: inherit; /* Chrome, Safari, Opera */ -webkit-animation: rainbow 2s infinite; } input.m7 { margin-left: 1100px; margin-top: 600px; position: absolute; width: 160px !important; background-color: inherit; /* Chrome, Safari, Opera */ -webkit-animation: rainbow 2s infinite; } input.m8 { margin-left: 300px; margin-top: 600px; position: absolute; width: 160px !important; background-color: inherit; /* Chrome, Safari, Opera */ -webkit-animation: rainbow 2s infinite; } /* Chrome, Safari, Opera */ @-webkit-keyframes rainbow{ 20%{color: red;} 40%{color: purple;} 60%{color: green;} 80%{color: blue;} 100%{color: orange;} } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="style.css"> <link href="https://fonts.googleapis.com/css?family=Titillium+Web:300,400,600,700" rel="stylesheet"> <script src="javascriptcalc.js" type="text/javascript"></script> <title>Clean Calculator</title> </head> <body> <!-- many memes --> <input class="m1" type="button" value="such wow" onclick="myStory()"> <input class="m2" type="button" value="many calculate" onclick="myStory()"> <input class="m3" type="button" value="very machine" onclick="myStory()"> <input class="m4" type="button" value="much javascript" onclick="myStory()"> <input class="m5" type="button" value="such root" onclick="myStory()"> <input class="m6" type="button" value="many squares" onclick="myStory()"> <input class="m7" type="button" value="very numbers" onclick="myStory()"> <input class="m8" type="button" value="much code" onclick="myStory()"> <!-- Calculator --> <div id="container"> <form name="calculator"> <div id="answer"> <span id="display">0</span> </div> </br> <div class="line"></div> <input type="button" id="MC" value="MC"/> <input type="button" id="M+" value="M+"/> <input type="button" id="M-" value="M-"/> <input type="button" id="MR" value="MR"/> </br> <input type="button" id="C" value="C"/> <input type="button" id="+/-" value="+/-"/> <input type="button" id="%" value="%"/> <input class="red" type="button" id="/" value="/"/> </br> <input class="numbers" type="button" id="7" value="7"/> <input class="numbers" type="button" id="8" value="8"/> <input class="numbers" type="button" id="9" value="9"/> <input class="red" type="button" id="X" value="X"/> </br> <input class="numbers" type="button" id="4" value="4"/> <input class="numbers" type="button"id="5" value="5"/> <input class="numbers" type="button" id="6" value="6"/> <input class="red" type="button" id="-" value="-"/> </br> <input class="numbers" type="button" id="1" value="1"/> <input class="numbers" type="button" id="2" value="2"/> <input class="numbers" type="button" id="3" value="3"/> <input class="red" type="button" id="+" value="+"/> </br> <input class="numbers" type="button" id="00" value="00"/> <input class="numbers" type="button" id="0" value="0"/> <input type="button" id="," value=","/> <input class="red" type="button" id="=" value="="/> </br> </form> </div> </body> </html> 

Answer 1

您缺少jquery 。 加載使用

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

 function myStory() { window.alert ("Very doge"); } // Als de pagina laadt: laad de query $(document).ready(function(){ // Onthoud de input van de gebruiker om later te gebruiken var inputs=[""]; // Onthoud de input van de gebruikers die eerst word ingetypt. var totalString; // Operator array voor validatie geheugen var operators1 = ["Mc", "M+", "M-", "MR"]; // Operator array voor validatie zonder '.' Zo kan er niet bijv. 2x ++ // worden ingevuld var operators2 = ["+", "-", "/", "X", "+/-"]; // Operators arrat voor validatie met de '.' var operators3 = ["."]; // Nummers voor validatie var numbers = [0,0,1,2,3,4,5,6,7,8,9]; //Functie om alles te updaten // ALS er een punt in zit, dan wordt er gekeken of het er maar 1 is en niet // meerdere, anders krijg je de error: Duplicate function getValue(input){ if(operators3.includes(inputs[inputs.length-1]) === true && input === "."){ window.alert("Duplicate '.' "); } else if (inputs.length === 1 && operators2.includes(input) === false){ inputs.push(input); } else if(operators2.includes(inputs[inputs.length-1]) === false){ inputs.push(input); } else if (numbers.includes(Number(input))){ inputs.push(input); } update(); } //Functie om de display te updaten function update(){ totalString = inputs.join(""); $("#display").html(totalString); console.log(inputs); } //Functie om het totaal te berekenen bijv. 8+6-4 wordt ingevuld // Dit wordt dan in 1x berekend. Het wordt zegmaar ge-evalueerd function getTotal(){ totalString = inputs.join(""); $("#display").html(eval(totalString)); } //Wanneer er op een button wordt geklikt, voer dan de functie uit. $("input").on("click", function(){ if (this.id === "C"){ inputs=[""]; update(); } else if (this.id === "="){ getTotal(); } else { if(inputs[inputs.length-1].indexOf("+", "-", "/", "X", "+/-") === -1){ getValue(this.id); } else { getValue(this.id); } } }); }); 

 body { font-family: 'Titillium Web', Helvetica, sans-serif; font-weight: 600; background-color: #f4f4f4; } #container { position: relative; width: 400px; height: 600px; background-color: #FFFFFF; margin: 0px auto; border-radius: 15px; box-shadow: 20px 40px 45px -4px rgba(0,0,0,0.05); } form[name="calculator"] { width: 320px; margin: 0 auto; margin-top: 50px; } #answer { font-family: 'Titillium Web', Helvetica, sans-serif; font-weight: 600; background-color: #FFFFFF; border: none; margin-top: 1em; width: 320px; height: 50px; padding-top: 50px; } #display { padding-left: 300px; font-size: 2em; } .line { width: 320px; height: 1px; background-color: #c3c3c3; } input[type="button"] { font-family: 'Titillium Web', Helvetica, sans-serif; font-weight: 600; width: 65px; height: 65px; margin-left: 10px; margin-top: 10px; border: none; background-color: #FFFFFF; color: #525252; font-size: 1.1em; } input[type="button"]:hover { border: none; color: #f67474; cursor: pointer; } input.numbers { color: #9d9d9d; } input.red { color: #f67474; } input.red:hover { color: #525252; } /* Memes */ p { color: #9d9d9d; float: left; } input.m1 { float: left; margin-left: 150px; margin-top: 80px; position: absolute; width: 160px !important; background-color: inherit; /* Chrome, Safari, Opera */ -webkit-animation: rainbow 2s infinite; } input.m2 { margin-left: 250px; margin-top: 250px; position: absolute; width: 160px !important; background-color: inherit; /* Chrome, Safari, Opera */ -webkit-animation: rainbow 2s infinite; } input.m3 { margin-left: 1100px; margin-top: 140px; position: absolute; width: 160px !important; background-color: inherit; /* Chrome, Safari, Opera */ -webkit-animation: rainbow 2s infinite; } input.m4 { margin-left: 1000px; margin-top: 400px; position: absolute; width: 160px !important; background-color: inherit; /* Chrome, Safari, Opera */ -webkit-animation: rainbow 2s infinite; } input.m5 { margin-left: 150px; margin-top: 450px; position: absolute; width: 160px !important; background-color: inherit; /* Chrome, Safari, Opera */ -webkit-animation: rainbow 2s infinite; } input.m6 { margin-left: 1200px; margin-top: 340px; position: absolute; width: 160px !important; background-color: inherit; /* Chrome, Safari, Opera */ -webkit-animation: rainbow 2s infinite; } input.m7 { margin-left: 1100px; margin-top: 600px; position: absolute; width: 160px !important; background-color: inherit; /* Chrome, Safari, Opera */ -webkit-animation: rainbow 2s infinite; } input.m8 { margin-left: 300px; margin-top: 600px; position: absolute; width: 160px !important; background-color: inherit; /* Chrome, Safari, Opera */ -webkit-animation: rainbow 2s infinite; } /* Chrome, Safari, Opera */ @-webkit-keyframes rainbow{ 20%{color: red;} 40%{color: purple;} 60%{color: green;} 80%{color: blue;} 100%{color: orange;} } 

 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="style.css"> <link href="https://fonts.googleapis.com/css?family=Titillium+Web:300,400,600,700" rel="stylesheet"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="javascriptcalc.js" type="text/javascript"></script> <title>Clean Calculator</title> </head> <body> <!-- many memes --> <input class="m1" type="button" value="such wow" onclick="myStory()"> <input class="m2" type="button" value="many calculate" onclick="myStory()"> <input class="m3" type="button" value="very machine" onclick="myStory()"> <input class="m4" type="button" value="much javascript" onclick="myStory()"> <input class="m5" type="button" value="such root" onclick="myStory()"> <input class="m6" type="button" value="many squares" onclick="myStory()"> <input class="m7" type="button" value="very numbers" onclick="myStory()"> <input class="m8" type="button" value="much code" onclick="myStory()"> <!-- Calculator --> <div id="container"> <form name="calculator"> <div id="answer"> <span id="display">0</span> </div> </br> <div class="line"></div> <input type="button" id="MC" value="MC"/> <input type="button" id="M+" value="M+"/> <input type="button" id="M-" value="M-"/> <input type="button" id="MR" value="MR"/> </br> <input type="button" id="C" value="C"/> <input type="button" id="+/-" value="+/-"/> <input type="button" id="%" value="%"/> <input class="red" type="button" id="/" value="/"/> </br> <input class="numbers" type="button" id="7" value="7"/> <input class="numbers" type="button" id="8" value="8"/> <input class="numbers" type="button" id="9" value="9"/> <input class="red" type="button" id="X" value="X"/> </br> <input class="numbers" type="button" id="4" value="4"/> <input class="numbers" type="button"id="5" value="5"/> <input class="numbers" type="button" id="6" value="6"/> <input class="red" type="button" id="-" value="-"/> </br> <input class="numbers" type="button" id="1" value="1"/> <input class="numbers" type="button" id="2" value="2"/> <input class="numbers" type="button" id="3" value="3"/> <input class="red" type="button" id="+" value="+"/> </br> <input class="numbers" type="button" id="00" value="00"/> <input class="numbers" type="button" id="0" value="0"/> <input type="button" id="," value=","/> <input class="red" type="button" id="=" value="="/> </br> </form> </div> </body> </html>