时间戳

首页 > 解决方案 > 如何使计算器按钮的值在单击时显示在显示屏上？

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

问题描述

这是我在这里的第一篇文章，所以如果我弄乱了我的消息格式，我提前道歉。

我正在学习 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: '+'
    },
];

标签： javascriptcalculator

解决方案

问题的出现是因为范围问题/变量问题。

您可以Uncaught TypeError: Cannot read property 'value' of undefined在代码中看到这一行：

$('#display').append('<p>' + interfaceItems[i].value + '</p>');

如果您i在此行之前添加控制台日志以获取 的值 - 您会看到 的值为i16。为什么？因为在文档准备功能上，您有一个 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 代码非常有用，并且可以避免将来来这里的旅行。祝您完成计算器应用程序好运！

推荐阅读