Как заставить значение кнопки калькулятора появиться на дисплее при нажатии на нее? - PullRequest
Новая
       5

Как заставить значение кнопки калькулятора появиться на дисплее при нажатии на нее?

0 голосов
/ 04 октября 2018

Это мой первый пост здесь, поэтому я заранее извиняюсь, если напутал с форматированием моего сообщения.

Я прохожу курс по веб-разработке 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 Ответ

0 голосов
/ 04 октября 2018

Проблема возникает из-за проблемы с областью видимости / переменной.

Вы получите 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 индексов, так что, хотя у вас есть 16 элементов в вашем массиве interfaceItems - 16-й индекс не определен (он идет только от 0-15).

Чтобы это исправить, я думаю, вы хотите избавиться от использования i в функции onclick.Вы можете использовать что-то вроде

this.innerText.trim(), чтобы получить текст элемента, а затем использовать его, чтобы он появился внутри калькулятора.

Вам нужно будет создать новый вопрос SO, чтобы помочь с другими частями вашего приложения калькулятора.Я надеюсь, что это решит вашу проблему, почему ваша функция onclick не работала.Использование консоли и добавление операторов console.log для отладки кода javascript очень полезно и избавит вас от поездок в будущем.Желаем удачи в завершении приложения калькулятор!

...