计算器输入和输出字段集
计算器输入和输出字段集
提问于 2017-05-04 00:36:32
光晕
我已经建立了一个计算器与(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>
回答 1
Stack Overflow用户
发布于 2017-05-04 00:46:41
您的代码中几乎没有问题。
下面是一个有效的示例：https://jsfiddle.net/871tvdrc/4/
实际上jQuery中并不存在.value()，它是.val()；
那么你的选择器就错了。
下面是正确的JS：
$(document).ready(function() {
$('.keys button').on('click', function() {
var value = $(this).val();
console.log(value);
$('.display .input').append(value);
});
$('button[name="="]').on('click', function() {
});
});下面是正确的HTML：
<form>
<fieldset class="display">
<output name="output" id="output" class="output"></output>
<output name="input" id="input" class="input"></output>
</fieldset>
<fieldset class="keys">
<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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/43765616
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号