Question

因此，我正在用JavaScript制作计算器，作为学习JavaScript的一种方式。我想在项目中添加某种面向对象的方法。

我的HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>The Unconventional Calculator</title>
    <link
      href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="assets/styles/app.css" />
  </head>
  <body>
    <header>
      <h1>The Unconventional Calculator</h1>
    </header>

    <section id="calculator">
      <input type="number" id="input-number" />
      <div id="calc-actions">
        <button type="button" id="btn-add">+</button>
        <button type="button" id="btn-subtract">-</button>
        <button type="button" id="btn-multiply">*</button>
        <button type="button" id="btn-divide">/</button>
        <button type="button" id="btn-equals">=</button>
      </div>
    </section>
    <section id="results">
      <h2 id="current-calculation">0</h2>
      <h2>Result: <span id="current-result">0</span></h2>
    </section>

    <section class="credit">

      <h1>Check out my code on <a href="https://github.com/harrisj09/The-Unconventional-Calculator">GitHub</a>
      <br>Type your number, press enter, repeat until you're done and then press enter.</h1>

    </section>
    <!-- So the site loads first then the js runs -->
    <script src="assets/scripts/vendor.js"></script>
    <script src="assets/scripts/app.js"> </script>
  </body>
</html>

我的CSS

* {
  box-sizing: border-box;
}

html {
  font-family: 'Roboto', open-sans;
}

body {
  margin: 0;
}

header {
  background: #6d0026;
  color: white;
  padding: 1rem;
  text-align: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26);
  width: 100%;
}

#results,
#calculator {
  margin: 2rem auto;
  width: 40rem;
  max-width: 90%;
  border: 1px solid #6d0026;
  border-radius: 10px;
  padding: 1rem;
  color: #6d0026;
}

#results {
  text-align: center;
}

#calculator input {
  font: inherit;
  font-size: 3rem;
  border: 2px solid #6d0026;
  width: 10rem;
  padding: 0.15rem;
  margin: auto;
  display: block;
  color: #6d0026;
  text-align: center;
}

#calculator input:focus {
  outline: none;
}

#calculator button {
  font: inherit;
  background: #6d0026;
  color: white;
  border: 1px solid #6d0026;
  padding: 1rem;
  cursor: pointer;
}

#calculator button:focus {
  outline: none;
}

#calculator button:hover,
#calculator button:active {
  background: #6d2d1b;
  border-color: #6d2d1b;
}

#calc-actions button {
  width: 4rem;
}

#calc-actions {
  margin-top: 1rem;
  text-align: center;
}

.credit {
  margin: 70px 0 0 0;
  text-align: center;
}

app.js

// Base Variables
let result = 0;
let number = 0;

//Store equation as string
let calculationDescription = "";

//Event listeners
document.querySelector("#btn-add").addEventListener('click', sumNumbs);
document.querySelector("#btn-subtract").addEventListener('click', subtractNumbs);
document.querySelector("#btn-multiply").addEventListener('click', multiplyNumbs);
document.querySelector("#btn-divide").addEventListener('click', divideNumbs);
document.querySelector("#btn-equals").addEventListener('click', equals);
document.querySelector('#input-number').addEventListener('keypress', numbersInput);

function numbersInput(e) {
    if(e.key === 'Enter' && userInput !== null) {
        number = e.target.value;
        e.target.value = '';
        calculationDescription += number + " ";
        console.log(calculationDescription);
    }
}

function sumNumbs() {
    calculationDescription += "+ ";
}

function subtractNumbs() {
    calculationDescription += "- ";
}

function multiplyNumbs() {
    calculationDescription += "x ";
}

function divideNumbs() {
    calculationDescription += "/ ";
}

function equals() {
    let finalCalculation = calculationDescription.split(" ");
    //Goes to errorHandler to remove whitespace and make array ready for equation
    errorHandler.removeWhiteSpace(finalCalculation);
}

errorHandler.js

class errorHandler {

    static removeWhiteSpace(arraySplit) {
        return console.log(arraySplit);
    }
}

vendor.js（这个对于解决方案并不重要）

const userInput = document.getElementById('input-number');
const addBtn = document.getElementById('btn-add');
const subtractBtn = document.getElementById('btn-subtract');
const multiplyBtn = document.getElementById('btn-multiply');
const divideBtn = document.getElementById('btn-divide');
const equalsBtn = document.getElementById('btn-equals');

const currentResultOutput = document.getElementById('current-result');
const currentCalculationOutput = document.getElementById('current-calculation');

function outputResult(result, text) {
  currentResultOutput.textContent = result;
  currentCalculationOutput.textContent = text;
}

因此，在我的equals方法中，我想将app.js类中的数组 finalCalculation 发送到 errorHandler中的 removeWhiteSpace 方法中.js

这是我不断收到的错误

app.js:44 Uncaught ReferenceError: errorHandler is not defined
    at HTMLButtonElement.equals (app.js:44)

我已经尝试将它们都转换为类，然后创建一个带有实例变量的构造函数，以供 errorHandler 接收数组，但这似乎没有工作。

无法访问其他“类”中的JavaScript方法

0 个答案: