Question

这是我在这里的第一篇文章，因此，如果我弄乱了邮件的格式，请向我道歉。

我正在上CareerFoundry Web开发课程，并且要求我们使用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: '+'
    },
];

Answer 1

该问题是由于范围问题/变量问题引起的。

您在代码的这一行得到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代码非常有用，并且可以避免将来再次旅行。祝您好运，完成计算器应用程序！

单击后如何使计算器按钮的值显示在显示屏上？

1 个答案: