如何使“计算器”按钮的值在单击“计算器”按钮时显示在显示器上？
这是我在这里的第一篇文章，所以如果我搞砸了我的邮件格式，我会提前道歉。
我正在做CareerFoundry网络开发课程，我们被要求使用javascript和jQuery编写一个计算器。我对编码完全陌生，这对我来说是非常令人困惑的。到目前为止，我已经成功地使用HTML、CSS和Javascript创建和样式了我的计算器，现在我需要使它具有功能。我在这一步，我想点击任何计算器按钮，并使其价值出现在显示div。我不知道怎么做.我试着使用附加方法，但是它不能用我编码的方式.另外，你能给我什么提示，如何在解决这一步骤后继续吗？谢谢!
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Calculator</title>
<link rel="stylesheet" type="text/css" href="css/styles.css">
<link rel="stylesheet" type="text/css" href="css/normalize.css">
</head>
<body>
<div id="calculator">
<div id="display"></div>
<div class="row" id="interface"></div>
<div class="button" id="CE"><p>CE</p></div>
</div><!-- end calculator -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<script src="js/interfaceItems.js"></script>
<script src="js/scripts.js"></script>
</body>
</html>CSS
body {
font-family: "Century Gothic", Arial, Lucida, Tahoma, Verdana, sans-serif;
font-size: 2em;
}
#calculator {
position: fixed;
display: flex;
flex-direction: row;
flex-wrap: wrap;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
max-width: 320px;
border: 1px solid grey;
border-radius: 10px;
background-color: #404040;
box-shadow: 5px 10px 20px;
}
#display {
display: flex;
justify-content: center;
text-align: right;
height: 73px;
width: 100%;
margin: 10px 10px 5px 10px;
border: 1px solid lightgrey;
border-radius: 5px;
padding: 5px;
background-color: #fff;
}
.row {
display: grid;
grid-template-columns: repeat(4, auto);
grid-gap: 2.5px;
justify-content: center;
margin: 0 10px 2.5px 10px;
}
.button {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
width: 73px;
height: 73px;
border-radius: 5px;
background-color: skyblue;
}
#CE {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
width: 100%;
height: 73px;
border-radius: 5px;
margin: 0 10px 10px 10px;
background-color: skyblue;
}
.button:hover,
#CE:hover {
cursor: pointer;
background-color: #fff;
}
.button:active,
#CE:active {
transform: scale(0.98,0.98);
box-shadow: 1px 1px 5px;
}JS
$(document).ready(function(){
for(var i = 0; i < interfaceItems.length; ++i) {
$('#interface').append('\
<div class="button">\
<p>' + interfaceItems[i].text + '</p>\
</div>\
');
$('#interface .button', this).on('click', function() {
$('#display').append('<p>' + interfaceItems[i].value + '</p>');
});
};
});
var interfaceItems = [
{
text: '7',
value: 7
},
{
text: '8',
value: 8
},
{
text: '9',
value: 9
},
{
text: '÷',
value: '/'
},
{
text: '4',
value: 4
},
{
text: '5',
value: 5
},
{
text: '6',
value: 6
},
{
text: '×',
value: '*'
},
{
text: '1',
value: 1
},
{
text: '2',
value: 2
},
{
text: '3',
value: 3
},
{
text: '−',
value: '-'
},
{
text: '0',
value: 0
},
{
text: '.',
value: '.'
},
{
text: '=',
value: '='
},
{
text: '+',
value: '+'
},
];回答 1
Stack Overflow用户
发布于 2018-10-04 10:21:10
这个问题的出现是因为一个范围问题/变量问题。
您可以在代码中的这一行获得Uncaught TypeError: Cannot read property 'value' of undefined：
$('#display').append('<p>' + interfaceItems[i].value + '</p>');如果在这一行之前添加控制台日志以获得i的值--您会看到i的值是16。为什么？因为在文档就绪函数上有一个for循环。
for(var i = 0; i < interfaceItems.length; ++i) {
在这个循环的末尾，您将i的值设置为16。因为javascript使用了0个索引，所以即使在interfaceItems数组中有16个元素--第16个索引是未定义的(它只从0到15)。
为了解决这个问题，我想你想摆脱在onclick函数中使用i的问题。你可以用这样的方法
this.innerText.trim()获取项目的文本，然后使用该文本使其出现在计算器中。
您将不得不创建一个新的所以问题，以帮助您的计算机应用程序的其他部分。我希望这解决了你的问题，为什么你的onclick功能不起作用。使用控制台和添加console.log语句来调试javascript代码是非常有用的，并将节省将来的行程。祝您顺利完成计算器应用程序！
https://stackoverflow.com/questions/52652947
复制
![在 Flutter 中创建可拖动的浮动操作按钮[Flutter专题15]](https://ask.qcloudimg.com/http-save/yehe-6702670/c296a9d727da9ccc4df3a9192e52d294.png)
![Js如何防止页面后退（使浏览器后退按钮失效）[通俗易懂]](https://ask.qcloudimg.com/http-save/yehe-8223537/3223b4821365742105f101789dbc4eb5.png)
相似问题
如何使计算器在显示中单击按钮时显示每个按钮的值？
Android计算器在单击按钮时崩溃
使所有清除按钮在计算器上工作
如何使按钮在单击时显示窗口？
在android上设置计算器按钮的布局
领取专属 10元无门槛券
AI混元助手 在线答疑
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
