計算器輸入和輸出字段集
[英]Calculator input and output fieldset
問題描述
光環
我已經用（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 個解決方案
解決方案1
1 2017-05-03 16:46:41
您的代碼中幾乎沒有問題。
這是一個工作示例： https : //jsfiddle.net/871tvdrc/4/
實際上.value()在jQuery中不存在，它是.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>
有沒有辦法使用javascript創建輸入/輸出計算器？
[英]Is there a way I can create an input/output calculator using javascript?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.