![](/img/trans.png)
[英]I want the value of my button to appear in a textbox upon clicking the button
[英]How to make the value of the calculator button appear on the display upon clicking it?
这是我在这里的第一篇文章,因此,如果我弄乱了邮件的格式,我会提前道歉。
我正在做CareerFoundry网络开发课程,要求我们使用javascript和jQuery编写计算器。 我对编码完全陌生,这对我来说非常混乱。 到目前为止,我已经设法使用HTML,CSS和Javascript创建计算器并设置其样式,现在我需要使其发挥作用。 我要单击任何计算器按钮,并在显示div中显示其值。 我不知道该怎么做...我正在尝试使用append方法,但是它不适用于我编写代码的方式...此外,在解决后如何继续可以给我任何提示吗?这一步? 谢谢!
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: '+'
},
];
该问题是由于范围问题/变量问题引起的。
您会收到Uncaught TypeError: Cannot read property 'value' of undefined
代码中此行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()
获取项目的文本,然后使用它使它显示在计算器内。
您将不得不创建一个新的SO问题,以帮助您的计算器应用程序的其他部分。 我希望这能解决您的问题,为什么您的onclick函数不起作用。 使用控制台并添加console.log
语句来调试javascript代码非常有用,并且可以避免将来再次旅行。 祝您好运,完成计算器应用程序!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.