JavaScriptで電卓を作る（＝の実装）

JavaScript初学者です。
現在、動画サイトや記事を元に、電卓を製作しています。

途中まではうまく行ったのですが、＝を押すとエラーが帰ってきてしまいます。
この場合、どこがおかしいのでしょうか…
ご教授いただけますと幸いです。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css">
  <title>電卓</title>
</head>
<body>
  
  <div class="container">
    
    <div id="total" class="display"></div>
    <div class="btn-box" >


      <button  onclick="reset()" class="reset-btn">A C</button>
      <button   onclick="set(this)" >/</button>
      <button  onclick="set(this)">７</button>
      <button  onclick="set(this)">８</button>
      <button  onclick="set(this)">９</button>
      
      <button  onclick="set(this)">＊</button>
      <button  onclick="set(this)">４</button>
      <button  onclick="set(this)">５</button>
      <button  onclick="set(this)">６</button>
      
      <button  onclick="set(this)">-</button>
      <button  onclick="set(this)">１</button>
      <button  onclick="set(this)">２</button>
      <button  onclick="set(this)">３</button>

      <button  onclick="set(this)">+</button>
      <button  onclick="set(this)">０</button>
      <button  onclick="set(this)">.</button>
      <button  onclick="calc(this)" class="equal">=</button>
  </div>
</div>


<script src="js/main.js"></script>
</body>
</html>

'use strict';

{
  var total = document.getElementById('total');

  function set(nums) {
    total.textContent = total.textContent + nums.textContent;
  }

  function calc() {
    total.textContent = new Function("return " + total.textContent)();
   }

  function reset() {
    total.textContent = "";
  }


}

リンク内容

maisumakun

2020/09/22 09:00

どのようなエラーになりましたか？

m.ts10806

2020/09/22 09:24

>この場合、どこがおかしいのでしょうか… エラーに現れている内容がおかしい　　ということになります。エラー読んだのでしょうか（そしてエラーから本当に何も得られなかったのでしょうか）。

退会済みユーザー

2020/09/22 09:35

Uncaught SyntaxError: Invalid or unexpected token at new Function (<anonymous>) at calc (main.js:11) at HTMLButtonElement.onclick (index.html:36) と表示されます。。

退会済みユーザー

2020/09/22 09:37

vscode ではエラー？が出ないのですが、コンソールの方で❌が出ます。

m.ts10806

2020/09/22 09:52

そもそも、何を参考に書きましたか？どの程度提示されたコードを理解しているのでしょうか。

gentaro

2020/09/22 09:53

> 'use script'; ひょっとして use strict のつもりでしょうか？

退会済みユーザー

2020/09/22 10:20

直しました！ありがとうございます

m.ts10806

2020/09/22 20:47

んで、なぜ退会した解決してないのに…

行動規範の内容に同意します

回答2件

せっかく勉強しているならhtmlにjsを埋め込まない方がよいですね
evalをつかっていいかどうかとか、こまかい入力調整とかありますが
おいおいご自身の勉強材料としてください
buttonのtextContentに全角文字をつかっているなら計算に利用する文字は
カスタムデータなどで与えた方がよいでしょう

calc.js

javascript
1'use strict';
2
3window.addEventListener('DOMContentLoaded', ()=>{
4  const total = document.querySelector('#total');
5  const set=(nums)=>{
6    var txt=total.textContent;
7    var num=nums.dataset["num"];
8    if(txt==="0" && num!==".") txt="";
9    total.textContent = txt + num;
10  }
11  document.querySelectorAll('[data-num]').forEach(x=>{
12    x.addEventListener('click',()=>{
13      set(x);
14    });
15  });
16  document.querySelector('.equal').addEventListener('click',()=>{
17    total.textContent = eval(total.textContent);
18  });
19  document.querySelector('.reset-btn').addEventListener('click',()=>{
20    total.textContent = "0";
21  });
22});

mypage.html

html
1<script src="calc.js"></script>
2  <div class="container">
3
4    <div id="total" class="display">0</div>
5    <div class="btn-box" >
6
7      <button class="reset-btn">A C</button>
8      <button data-num="/">/</button>
9      <button data-num="7">７</button>
10      <button data-num="8">８</button>
11      <button data-num="9">９</button>
12
13      <button data-num="*">＊</button>
14      <button data-num="4">４</button>
15      <button data-num="5">５</button>
16      <button data-num="6">６</button>
17
18      <button data-num="-">-</button>
19      <button data-num="1">１</button>
20      <button data-num="2">２</button>
21      <button data-num="3">３</button>
22
23      <button data-num="+">+</button>
24      <button data-num="0">０</button>
25      <button data-num=".">.</button>
26      <button class="equal">=</button>
27  </div>
28</div>