質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Webサイト

一つのドメイン上に存在するWebページの集合体をWebサイトと呼びます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

1回答

2160閲覧

webで電卓アプリを作成しようとしたが、上手く動かない。

aroma

総合スコア8

Webサイト

一つのドメイン上に存在するWebページの集合体をWebサイトと呼びます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2020/05/13 16:18

初めまして。JavaScript初心者です。
現在、私は動画を見ながらweb上に電卓アプリを作成しているのですが、動画通りに入力しても、上手く動きませんでした。
エラーの原因はJavaScriptの
const calculator = new Calculator(previousOperandTextElement,currentOperandTextElement);
の箇所で"previousOperandTextElement"が定義されていないとエラーが出力されました。

そこで、引数を無くし
const calculator = new Calculator
と記述し、コンパイルを行いました。

そして、実際に数字をクリックしてみると、以下のようなエラーが出力されました。
script.js:29 Uncaught TypeError: Cannot set property 'innerText' of undefined
at Calculator.updateDisplay (script.js:29)
at HTMLButtonElement.<anonymous> (script.js:46)

質問内容は2つで

  1. インスタンス化するときの引数をどのようにすればよいのか。
  2. 上記のエラーを解消するにはどのようにすればよいのか。

<試したこと>
・引数に1を与えた。
⇒Uncaught TypeError: Cannot create property 'innerText' on number '1'
at Calculator.updateDisplay (script.js:29)
at HTMLButtonElement.<anonymous> (script.js:46)

・htmlでscriptの読み込みを</head>の手前に書き、deferを付け加えた。
⇒エラーの内容に変化なし

ご回答よろしくお願いします。

html

1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>Calculator</title> 7 <link href="style.css" rel="stylesheet"> 8</head> 9<body> 10 <div class="calculator-grid"> 11 <div class="output"> 12 <div data-previous-operand class="previous-operand"></div> 13 <div data-current-operand class="current-operand"></div> 14 </div> 15 <button data-all-clear class="span-two">AC</button> 16 <button data-delete>DEL</button> 17 <button data-operation>÷</button> 18 <button data-number>1</button> 19 <button data-number>2</button> 20 <button data-number>3</button> 21 <button data-operation>*</button> 22 <button data-number>4</button> 23 <button data-number>5</button> 24 <button data-number>6</button> 25 <button data-operation>+</button> 26 <button data-number>7</button> 27 <button data-number>8</button> 28 <button data-number>9</button> 29 <button data-operation>-</button> 30 <button data-number>.</button> 31 <button data-number>0</button> 32 <button data-equals class="span-two">=</button> 33 </div> 34 <script src="script.js"></script> 35</body> 36</html>

JavacScript

1'use strict'; 2 3class Calculator{ 4 constructor(previousOperandTextElement, currentOperandTextElement) { 5 this.previousOperandTextElement = previousOperandTextElement; 6 this.currentOperandTextElement = currentOperandTextElement; 7 this.clear(); 8 } 9 clear() { 10 this.currentOperand = ''; 11 this.previousOperand = ''; 12 this.operation = undefined; 13 } 14 15 delete() { 16 17 } 18 19 appendNumber(nubmer) { 20 this.currentOperand = this.currentOperand.toString() + numberButtons.toString(); 21 } 22 chooseOperation(operation) { 23 24 } 25 compute() { 26 27 } 28 updateDisplay() { 29 this.currentOperandTextElement.innerText = this.currentOperand; 30 } 31} 32 33const numberButtons = document.querySelectorAll('[data-number]'); 34const operationButtons = document.querySelectorAll('[data-operation]'); 35const equalsButton = document.querySelector('[data-equals]'); 36const deleteButton = document.querySelector('[data-delete]'); 37const allCrearButton = document.querySelector('[data-all-clear]'); 38const previousOperandButton = document.querySelector('[data-previous-operand]'); 39const currentOperandButton = document.querySelector('[data-current-operand]'); 40 41const calculator = new Calculator(previousOperandTextElement,currentOperandTextElement); 42 43numberButtons.forEach(button => { 44 button.addEventListener('click', () => { 45 calculator.appendNumber(button.innerText); 46 calculator.updateDisplay(); 47 }); 48});

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kei344

2020/05/13 16:30

(質問文は編集できます)コードの参照元URLを質問文に追記してください。
m.ts10806

2020/05/14 13:58 編集

私が不勉強なだけかもしれませんが > const calculator = new Calculator これが「コンパイルである」と表現した理由を教えてください。 のちに「インスタンス化するときの」と書かれているので「あれ?」と思いました。
aroma

2020/05/21 06:33

申し訳ありません。私の勉強不足でした。
m.ts10806

2020/05/21 06:42

質問は編集できますので。
guest

回答1

0

ベストアンサー

現在、私は動画を見ながらweb上に電卓アプリを作成しているのですが、動画通りに入力しても、上手く動きませんでした。

何を参照したのかわかりませんが、本当に「動画の通り」なんでしょうか。
querySelectorquerySelectorAllの使い方がメチャクチャです。

また

const calculator = new Calculator(previousOperandTextElement,currentOperandTextElement);

の箇所で"previousOperandTextElement"が定義されていないとエラーが出力されました。

というメッセージを読めば、previousOperandTextElementの定義が必要であることはわかるはずですが、

そこで、引数を無くし

const calculator = new Calculator
と記述し、コンパイルを行いました。

という対応をする理由がわかりません。
あと「コンパイル」はしてないと思いますが、言葉の意味はご存知でしょうか。

見様見真似だけでコードが書けるようにはならないので、最低限「JavaScript 入門」とかでググって入門記事を読んでみたり、体系的に理解するために入門書を購入することをオススメします。

ここでこのコードの問題点を直せたとしても、「なぜそうしなければならないのか」を理解していないと意味がありません。

動画を参考にして学習されるのが悪いとは言いませんが、少なくともその動画を視聴していてこのような質問になるという事は、今のあなたにとって必要な知識が身に付く教材でない事だけは明らかですので、その動画の視聴をやめてもっと基礎的な事から学べる教材を探しましょう。

投稿2020/05/13 16:38

編集2020/05/13 16:51
gentaro

総合スコア8949

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

aroma

2020/05/14 13:56

ご返答ありがとうございます。 少し勘違いしていたところもあったので、基礎から勉強しなおそうと思います。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問