我刚刚开始学习JavaScript,但我正尝试建立一个计算器网站,但无法正常运行

伊米尔·梅德布

我写了一个由HTML,CSS和javascript组成的代码,它应该是网站中的计算器。但是,由于我对使用JavaScript编码不是很有经验,所以遇到了一些问题。现在,我只为数字输入编码该部分(不用于操作和删除),当我单击任何数字时,显示框中什么也没有出现。谁能帮我吗?

class Calculator {
  constructor(previousOperandTextElement, currentOperandTextElement) {
    this.previousoperandtextelement = previousOperandTextElement
    this.currentOperandTextElement = currentOperandTextElement
    this.clear()
  }

  clear() {
    this.currentOperand = ''
    this.previousOperand = ''
    this.operation = undefined
  }

  delete() {

  }

  appendNumber(number) {
    this.currentOperand = number
  }

  chooseoperation(operation) {

  }

  compute() {

  }

  updateDisplay() {
    this.currentOperandTextElement.innerText = this.currentOperand
  }
}

const numberButtons = document.querySelectorAll('[data-number]')
const operationButtons = document.querySelectorAll('[data-operation]')
const equalsButton = document.querySelector('[data-equals]')
const deleteButton = document.querySelector('[data-delete]')
const allcleaButton = document.querySelector('[data-all-clear]')
const previousOperandTextElement = document.querySelector('[data-previous-operand]')
const currentOperandTextElement = document.querySelector('[data-current-operand]')

const calculator = new Calculator(previousOperandTextElement, currentOperandTextElement)

numberButtons.forEach(button => {
  button.addEventListener('click', () => {
    calculator.appendNumber(button.innerText)
    calculator.updateDisplay()
  })
})
<div class="calculator-grid">
  <div class="output">
    <div data-previous-operand class="previous-operand"></div>
    <div data-current-operand class="current-operand"></div>
  </div>
  <button data-all-clear class="span-two">AC</button>
  <button data-delete>DEL</button>
  <button data-operation>÷</button>
  <button data-number>1</button>
  <button data-number>2</button>
  <button data-number>3</button>
  <button data-operation>*</button>
  <button data-number>4</button>
  <button data-number>5</button>
  <button data-number>6</button>
  <button data-operation>+</button>
  <button data-number>7</button>
  <button data-number>8</button>
  <button data-number>9</button>
  <button data-operation>-</button>
  <button data-number>.</button>
  <button data-number>0</button>
  <button data-equals class="span-two">=</button>
</div>

托马斯·萨布利克

appendNumber不附加。它会覆盖。<input type="text">没有innerText它具有value

class Calculator {
  constructor(currentOperandTextElement) {
    this.currentOperandTextElement = currentOperandTextElement
    this.currentOperand = ''
  }

  appendNumber(number) {
    this.currentOperand += number   
  }

  updateDisplay() {
    this.currentOperandTextElement.value = this.currentOperand
  }
}

const numberButtons = document.querySelectorAll('[data-number]')
const currentOperandTextElement = document.querySelector('[data-current-operand]')

const calculator = new Calculator(currentOperandTextElement)

numberButtons.forEach(button => {
  button.addEventListener('click', () => {
    calculator.appendNumber(button.innerText)
    calculator.updateDisplay()
  })
})
<button data-number>1</button>
<input type="text" data-current-operand>

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

我刚刚开始学习使用C ++的链接列表。我正在尝试使用矢量创建一个链表。为什么此代码有问题?

来自分类Dev

我刚刚开始学习使用硒的网络抓取。我需要登录本地网站并双击某些项目

来自分类Dev

我刚刚开始学习python。我想获取文件名作为用户输入

来自分类Dev

因此,我刚刚开始在treehouse.com中学习Java,它已经完成了基本工作,但是当我尝试在Intellij想法上学到的所有内容时,我却无济于事

来自分类Dev

因此,我刚刚开始在treehouse.com中学习Java,它已经完成了基础工作,但是当我尝试在Intellij想法上学到的所有东西时,我却无济于事

来自分类Dev

我正在尝试使用AddEventListener和QuerySelector创建一个简单的Javascript计算器

来自分类Dev

我可以改善我的PDO方法吗(刚刚开始)

来自分类Dev

我正在尝试制作一个计算器,一个简单的

来自分类Dev

我正在尝试建立一个 HTTPS 网站,但我被困在教程步骤中

来自分类Dev

我正在尝试构建一个简单的计算器

来自分类Dev

我正在尝试创建一个蒸汽税计算器,但它失败得可怕

来自分类Dev

我正在尝试从GMocked类返回一个rapidjson :: Value,但我似乎无法使其正常工作

来自分类Dev

我创建了一个移动响应式网站。一切正常,但无法顺利滚动

来自分类Dev

我正在尝试使用NVD3重现一个示例,但无法正常工作

来自分类Dev

刚刚开始与Google图表+ displayMode = text一起发生的MissingKeyMapError

来自分类Dev

刚刚开始与Google图表+ displayMode = text一起发生的MissingKeyMapError

来自分类Dev

尝试在我的Ubuntu 18服务器上运行另一个网站

来自分类Dev

我刚刚开始android开发,当我制作此应用程序时,它在调试时不起作用

来自分类Dev

我正在尝试使用Foundation scss建立一个新网站,但是,每次我尝试运行sass时,都会出现此错误

来自分类Dev

在SQL中替换刚刚开始的字符串

来自分类Dev

PayPal API SSL问题-刚刚开始

来自分类Dev

在SQL中替换刚刚开始的字符串

来自分类Dev

获取刚刚开始的屏幕会话的PID

来自分类Dev

Azure Worker 角色刚刚开始工作

来自分类Dev

我做了一个年龄计算器,我需要刷新以重新使用

来自分类Dev

我的 python 代码有一个错误 involvinf % 计算器,我找不到它

来自分类Dev

尝试创建一个简单的总和计算器

来自分类Dev

我试图为我的网站运行一个 url 文件,但我在 powershell 中不断收到错误

来自分类Dev

我试图用python做一个基本的计算器。我包括一个函数索引

Related 相关文章

  1. 1

    我刚刚开始学习使用C ++的链接列表。我正在尝试使用矢量创建一个链表。为什么此代码有问题?

  2. 2

    我刚刚开始学习使用硒的网络抓取。我需要登录本地网站并双击某些项目

  3. 3

    我刚刚开始学习python。我想获取文件名作为用户输入

  4. 4

    因此,我刚刚开始在treehouse.com中学习Java,它已经完成了基本工作,但是当我尝试在Intellij想法上学到的所有内容时,我却无济于事

  5. 5

    因此,我刚刚开始在treehouse.com中学习Java,它已经完成了基础工作,但是当我尝试在Intellij想法上学到的所有东西时,我却无济于事

  6. 6

    我正在尝试使用AddEventListener和QuerySelector创建一个简单的Javascript计算器

  7. 7

    我可以改善我的PDO方法吗(刚刚开始)

  8. 8

    我正在尝试制作一个计算器,一个简单的

  9. 9

    我正在尝试建立一个 HTTPS 网站,但我被困在教程步骤中

  10. 10

    我正在尝试构建一个简单的计算器

  11. 11

    我正在尝试创建一个蒸汽税计算器,但它失败得可怕

  12. 12

    我正在尝试从GMocked类返回一个rapidjson :: Value,但我似乎无法使其正常工作

  13. 13

    我创建了一个移动响应式网站。一切正常,但无法顺利滚动

  14. 14

    我正在尝试使用NVD3重现一个示例,但无法正常工作

  15. 15

    刚刚开始与Google图表+ displayMode = text一起发生的MissingKeyMapError

  16. 16

    刚刚开始与Google图表+ displayMode = text一起发生的MissingKeyMapError

  17. 17

    尝试在我的Ubuntu 18服务器上运行另一个网站

  18. 18

    我刚刚开始android开发,当我制作此应用程序时,它在调试时不起作用

  19. 19

    我正在尝试使用Foundation scss建立一个新网站,但是,每次我尝试运行sass时,都会出现此错误

  20. 20

    在SQL中替换刚刚开始的字符串

  21. 21

    PayPal API SSL问题-刚刚开始

  22. 22

    在SQL中替换刚刚开始的字符串

  23. 23

    获取刚刚开始的屏幕会话的PID

  24. 24

    Azure Worker 角色刚刚开始工作

  25. 25

    我做了一个年龄计算器,我需要刷新以重新使用

  26. 26

    我的 python 代码有一个错误 involvinf % 计算器,我找不到它

  27. 27

    尝试创建一个简单的总和计算器

  28. 28

    我试图为我的网站运行一个 url 文件,但我在 powershell 中不断收到错误

  29. 29

    我试图用python做一个基本的计算器。我包括一个函数索引

热门标签

归档