0
Ich habe einen Rechner für eine Schulaufgabe erst nach Stunden des Tippens gemacht und versucht, meinen Code zu reparieren. Es funktioniert immer noch nicht und ich hoffte, dass jemand meine Fehler finden könnte.JavaScript - Versuch, einen Taschenrechner zu programmieren
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>
Was nicht funktioniert? – borislemke
schauen Sie bitte hier: [mcve] –
Whoa zu viel Code. Fügen Sie einfach den Teil hinzu, in dem Sie sich befinden Problem –