0
私は、何時間も入力して自分のコードを修正しようとしてから、学校の割り当てのために電卓を作った。それはまだ動作していないと私は誰かが私の間違いを見つけることを望んでいた。Javacript - 電卓をコーディングしようとしています
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{
\t 20%{color: red;}
\t 40%{color: purple;}
\t 60%{color: green;}
\t 80%{color: blue;}
\t 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>
を使用していますか？ – borislemke
こちらをご覧ください：[mcve] –
あまりにも多くのコード。問題に直面している部分を追加してください。 –