0
HaloRechner Ein- und Ausgang fieldset
Ich habe einen Rechner mit (CSS, HTML, JavaScript) gebaut. das Problem ist, dass ich es nicht schaffen, die Tasten auf der (Form.input) angezeigt werden, und die Antworten in die (Form.Output) Der JavaScript-Code sollte funktionieren, aber es tut nichts. Irgendwelche Vorschläge, wie Sie das beheben können?
$(document).ready(function() {
$('.keys button').on('click', function() {
var value = $(this).value();
$('.display.input').append(value);
});
$('button[name="="]').on('click', function() {
});
});/* reset */
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
font-size: 5vw;
}
html, body {
width: 100%;
margin: 0;
padding: 0;
}
/* document */
body {
font-family: "URW Gothic L", "Helvetica", "Arial", sans-serif;
/* Background source:
* http://www.texturex.com/Leather-Textures/black+leather+texture+large+close+up+grain+material+dark+fabric+stock+photo.jpg.php
* Free offered by Free Leather Textures */
background: url('../../../media/black-leather-texture.jpg');
}
.display {
border: 0.2rem solid gray;
border-radius: 0.5rem;
background: black;
padding: 0.5rem;
width: 100%;
display: block;
}
.display > output {
display: block;
height: 1.5rem;
margin: 0;
color: aqua;
}
form {
width: 100%;
padding: 0.5rem;
}
fieldset {
border: none;
margin: 0;
font-size: 0;
}
fieldset > button {
width: 20%;
margin: 3.3%;
padding: 2vw;
}
fieldset > button:nth-child(4n) {
margin-right: 0;
}
fieldset > button:nth-child(4n+1) {
margin-left: 0;
}
button {
box-shadow: 0 0 0.5rem black;
border: none;
border-radius: 0.5rem;
text-align: center;
vertical-align: middle;
margin: 0;
font-weight: bold;
font-size: 1.5rem;
}
output {
font-size: 1rem;
}
button.number, button.command {
background: white;
}
button.number:active, button.command:active {
background: rgb(230, 230, 230);
box-shadow: inset 0 0 0.5rem black;
}
button.operator {
box-shadow: 0 0 0.5rem rgb(80,80, 80);
background: black;
color: white;
}
button.operator:active {
background: rgb(60, 60, 60);
box-shadow: inset 0 0 0.5rem black;
}
#key-c {
background: red;
color: white;
}
#key-c:active {
background: darkred;
}
button:focus {
box-shadow: 0 0 0.5rem deepskyblue;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Casio Mini</title>
<link rel="stylesheet" href="styles/style.css" />
<script src="scripts/calculator.js"></script>
</head>
<body>
<form>
<fieldset class="display">
<output name="output" id="output" class="output"></output>
<output name="input" id="input" class="input"></output>
</fieldset>
<fieldset>
<button type="button" name="key-0" id="key-0" class="number" value="0">0</button>
<button type="button" name="key-1" id="key-1" class="number" value="1">1</button>
<button type="button" name="key-2" id="key-2" class="number" value="2">2</button>
<button type="button" name="key-+" id="key-+" value="+" class="operator">+</button>
<button type="button" name="key-3" id="key-3" class="number" value="3">3</button>
<button type="button" name="key-4" id="key-4" class="number" value="4">4</button>
<button type="button" name="key-5" id="key-5" class="number" value="5">5</button>
<button type="button" name="key--" id="key--" value="-" class="operator">−</button>
<button type="button" name="key-6" id="key-6" class="number" value="6">6</button>
<button type="button" name="key-7" id="key-7" class="number" value="7">7</button>
<button type="button" name="key-8" id="key-8" class="number" value="8">8</button>
<button type="button" name="key-*" id="key-*" value="*" class="operator">∗</button>
<button type="button" name="key-9" id="key-9" class="number" value="9">9</button>
<button type="button" name="key-c" id="key-c" class="command">C</button>
<button type="button" name="key-=" id="key-=" class="command">=</button>
<button type="button" name="key-/" id="key-/" value="/" class="operator">÷</button>
</fieldset>
</form>
</body>
</html>
Bitte ein ausführbares Beispiel aus dem Code machen, ein Tool wie jsfiddle verwenden. – creimers