0
我已經用CSS（CSS，HTML，JavaScript）構建了一個計算器。 問題是，我無法設法顯示（Form.input）， 和答案（Form.Output） 上的按鈕JavaScript代碼應該工作，但它什麼都不做。 任何建議如何解決這個問題？
$(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>
請從您的代碼生成一個可執行例如，使用類似的jsfiddle的工具。 – creimers