Javascript 计算器输入和输出字段集

光环

我用（CSS、HTML、JavaScript）构建了一个计算器。 问题是我无法在（Form.input）上显示按钮， 以及（Form.Output）中的答案 javascript代码应该可以工作，但它什么都做不了。 有什么建议可以解决这个问题吗

$（文档）.ready（函数（）{
$（'.keys按钮'）。在（'click'，function（）上{
var value=$（this.value（）；
$（'.display.input'）.append（value）；
});
$（'button[name=“=”]）。在（'click'，function（）上{
});
});
/*重置*/
*  {
-webkit框大小：边框框；
-moz框大小：边框框；
-ms框尺寸：边框框；
框大小：边框框；
保证金：0；
填充：0；
}
html{
字体大小：5vw；
}
html，正文{
宽度：100%；
保证金：0；
填充：0；
}
/*文件*/
身体{
字体系列：“URW哥特式L”、“Helvetica”、“Arial”、无衬线；
/*背景资料来源：
* http://www.texturex.com/Leather-Textures/black+皮革+纹理+大型+特写+近距离+纹理+材质+深色+面料+库存+照片.jpg.php
*免费提供免费皮革纹理*/
背景：url（'../../media/black leather texture.jpg'）；
}
.展示{
边框：0.2rem实心灰色；
边界半径：0.5雷姆；
背景：黑色；
填充：0.5雷姆；
宽度：100%；
显示：块；
}
.显示>输出{
显示：块；
高度：1.5雷姆；
保证金：0；
颜色：浅绿色；
}
形式{
宽度：100%；
填充：0.5雷姆；
}
字段集{
边界：无；
保证金：0；
字号：0；
}
字段集>按钮{
宽度：20%；
利润率：3.3%；
填充物：2vw；
}
字段集>按钮：第n个子项（4n）{
右边距：0；
}
字段集>按钮：第n个子项（4n+1）{
左边距：0；
}
钮扣{
长方体阴影：0.5rem黑色；
边界：无；
边界半径：0.5雷姆；
文本对齐：居中；
垂直对齐：中间对齐；
保证金：0；
字体大小：粗体；
字体大小：1.5rem；
}
输出{
字号：1rem；
}
button.number，button.command{
背景：白色；
}
按钮。编号：活动，按钮。命令：活动{
背景：rgb（230230230）；
长方体阴影：嵌入0.5rem黑色；
}
按钮操作员{
盒影：0.5雷姆rgb（80,80,80）；
背景：黑色；
颜色：白色；
}
按钮。操作员：激活{
背景：rgb（60,60,60）；
长方体阴影：嵌入0.5rem黑色；
}
#键c{
背景：红色；
颜色：白色；
}
#键c：激活{
背景：黑暗；
}
按钮：焦点{
盒影：0.5rem深天蓝；
}

卡西欧迷你
0
1.
2.
&加；
3.
4.
5.
&负的；
6.
7.
8.
&低糖；
9
C
&平等；
&划分；
您的代码中几乎没有问题

下面是一个工作示例：

实际上，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">&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>


0
1.
2.
&加；
3.
4.
5.
&负的；
6.
7.
8.
&低糖；
9
C
&平等；
&划分；
请使用JSFIDLE等工具从代码中创建一个可执行示例。感谢您的快速响应。我确实复制了JavaScript代码和HTML代码，但steel不起作用。我不得不说，它们分别位于不同的文件中。1个用于HTML，1个用于CSS，1个用于JS。如果只在1个字段集中使用输出和输入，那么就可以了，但是我必须输出和输入，也就是说什么都没有发生。您是否为所有元素添加了正确的类？你能把你的完整代码粘贴给我吗？你之前发布的示例运行得非常好，我向你发布了更改，所以我现在无法理解你的实际代码，我使用了你的cod和我的代码抱歉，我的错