堆栈内存溢出
  简体   繁体   English

计算器输入和输出字段集

[英]Calculator input and output fieldset

 原文  2017-05-03 16:36:32  6   1    javascript/ css/ calculator

问题描述

Halo 光环

I have build a Calculator with (CSS, HTML, JavaScript). 我已经用（CSS，HTML，JavaScript）构建了一个计算器。 the problem is that I can't manage to display the buttons on the (Form.input), and the answers in to the (Form.Output) The javascript code should work, but it doesn't do anything. 问题是我无法在（Form.input）上显示按钮，并且（Form.Output）中的答案javascript代码应该起作用，但是它什么也没做。 Any suggestions how to fix this? 任何建议如何解决此问题？ 

 $(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">&plus;</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">&minus;</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">&lowast;</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">&equals;</button> <button type="button" name="key-/" id="key-/" value="/" class="operator">&divide;</button> </fieldset> </form> </body> </html>

1 个解决方案

解决方案1
 1  2017-05-03 16:46:41

There were few issues in your code. 您的代码中几乎没有问题。

Here a working example: https://jsfiddle.net/871tvdrc/4/ 这是一个工作示例： https : //jsfiddle.net/871tvdrc/4/

Actually .value() doesn't exist in jQuery, it is .val() ; 实际上.value()在jQuery中不存在，它是.val() ；

Then your selectors were wrong. 然后您的选择器是错误的。

Here the right JS: 这里是正确的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() {

  });

});

Here the right HTML: 这里是正确的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">&plus;</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">&minus;</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">&lowast;</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">&equals;</button>
    <button type="button" name="key-/" id="key-/" value="/" class="operator">&divide;</button>
  </fieldset>
</form>

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 限制字段​​集中的输入 - Limit the input in Fieldset 有没有办法使用javascript创建输入/输出计算器？ - Is there a way I can create an input/output calculator using javascript? 从字段集中获取输入值？ - Get input value from fieldset? JavaScript，在计算器中输出 - JavaScript, output in calculator JavaScript计算器输入背景 - javascript calculator input background 角度用户输入计算器 - Angular user input calculator LWC 日期输入计算器 - LWC Date input Calculator Javascript 文本输入计算器 - Javascript Text Input Calculator 3次返回，一次输入一个计算器 - 3 returns for one input for a calculator 如何在 fieldset 标签中制作输入标签？ - How to make input tag in fieldset tag required?
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM