stackoom
  简体   繁体   中英

Calculator input and output fieldset

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

Question

Halo

I have build a Calculator with (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. 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 answers

solution1
 1  2017-05-03 16:46:41

There were few issues in your code.

Here a working example: https://jsfiddle.net/871tvdrc/4/

Actually .value() doesn't exist in jQuery, it is .val() ;

Then your selectors were wrong.

Here the right 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: 

<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>

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question Limit the input in Fieldset Is there a way I can create an input/output calculator using javascript? Get input value from fieldset? JavaScript, output in calculator javascript calculator input background Angular user input calculator LWC Date input Calculator Javascript Text Input Calculator 3 returns for one input for a calculator How to make input tag in fieldset tag required?
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM