programmuzukasi
@programmuzukasi

Are you sure you want to delete the question?

Leaving a resolved question undeleted may help others!

Javascript html css

解決したいこと

ReferenceError: return2 is not definedの画面を消して、電卓アプリを計算させたい

Javascript(html・css)で質問です。
電卓アプリを作りたいのですが、画面上にReferenceError: return2 is not defined
が表示され、調べると、変数もしくは関数が定義されていないという意味になると載っているのですが、どうも、原因が何なのか、分かりません。開発者ツールのConsoleを見ると、Excpression not availableが出ていて、その他は具体的なエラーが出ていないので、どうも分かりません。大変お手数がですが、どなたかご存じの片、教えていただけないでしょか?因みに、どこのサイトから引っ張って来たか分かりません。検索したのですが、
消えてしまいました。誠にすみません。
解決方法を教えて下さい。

発生している問題・エラー

画面上にReferenceError: return2 is not defined

例)

または、問題・エラーが起きている画像をここにドラッグアンドドロップ

該当するソースコード

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>CaluculatorProgram</title>
    <style>
.calculator_area{
  height: 600px;
  width: 400px;
  border: solid 3px #000000;
}

.calc_area{
  height: 60px;
  width: 300px;
  border: solid 3px #000000;
  margin-left:40px;
  margin-top: 20px;
}

.calcbox{
  height: 53px;
  width: 293px;
  border:solid 0px;
  font-size: 40px;
}

.button_area{
  margin:20px;
  height:480px;
  width: 350px;
  display:flex;
  flex-wrap: wrap;
}

.button{
  height:50px;
  width: 15%;
  margin-top:20px;
  margin-left:23px;
  border: solid 3px #000000;
  text-align:center;
  background-color: #000000;
}
.button_text{
  text-align:center;
  font-weight: bold;
  color: #ffffff;
}
    </style>
</head>
<body>

    <div class="calculator_area">

    <div class="calc_area">
      <input class="calcbox" id="calc">  
    </div>
    
    <div class="button_area">
      <div class="button" onclick="update('')">
       <p class="button_text">AC</p> 
      </div>
      <div class="button" onclick="Clear()">
       <p class="button_text">C</p> 
      </div>
        <div class="button" onclick="percentage()">
         <p class="button_text">%</p> 
        </div>
          <div class="button" onclick="inputNumber('÷')">
             <p class="button_text">÷</p> 
            </div>
                <div class="button" onclick="inputNumber('1')">
                 <p class="button_text">1</p> 
                </div>
                <div class="button" onclick="inputNumber('2')">
                 <p class="button_text">2</p> 
                </div>
                <div class="button" onclick="inputNumber('3')">
                 <p class="button_text">3</p> 
                </div>
                <div class="button" onclick="inputNumber('×')">
                 <p class="button_text">×</p> 
                </div>
                <div class="button" onclick="inputNumber('4')">
                 <p class="button_text">4</p> 
                </div>
                <div class="button" onclick="inputNumber('5')">
                 <p class="button_text">5</p> 
                </div>
                <div class="button" onclick="inputNumber('6')">
                 <p class="button_text">6</p> 
                </div>
                <div class="button" onclick="inputNumber( '+' )">
                 <p class="button_text">+</p> 
                </div>
                <div class="button" onclick="inputNumber('7')">
                 <p class="button_text">7</p> 
                </div>
                <div class="button" onclick="inputNumber('8')">
                 <p class="button_text">8</p> 
                </div>
                <div class="button" onclick="inputNumber('9')">
                 <p class="button_text">9</p> 
                </div>
                <div class="button" onclick="inputNumber('-')">
                 <p class="button_text">-</p> 
                </div>
                <div class="button" onclick="inputNumber('.')">
                 <p class="button_text">.</p> 
                </div>
                <div class="button" onclick="inputNumber('0')">
                 <p class="button_text">0</p> 
                </div>
                <div class="button" onclick="inputNumber('00')">
                 <p class="button_text">00</p> 
                </div>
                <div class="button" onclick="calc()">
                    <p class="button_text">=</p>     
                </div>                                       
               </div>
            </div>
         <script>

        function inputNumber(num) {
            document.querySelector('#calc').value += num;
        }


           function Clear() {
              var calcAreaText = document.querySelector('#calc').value;
              var afterDeleteText = calcAreaText.slice(0,-1);
              document.querySelector('#calc').value = afterDeleteText;  
            }

     
           function update(updatenum) {
            document.querySelector('#calc').value = updatenum;
           }


           function operatorConversion(calcAreaText) {
            var multipliedConv = calcAreaText.replaceAll("×","*");
            var dividedConv = multipliedConv.replaceAll("÷", "/");
            return dividedConv;
           }


           function calcFunction(calcAreaTextConv) {
            const answer = new Function('return' + calcAreaTextConv);
            return answer;
           }


           function calc() {
            var calcAreaText = document.querySelector('#calc').value;
            var calcAreaTextConv = operatorConversion(calcAreaText);

            var regex = /[+\-\×\÷]/g;

            var branch = calcAreaText.search(regex);
            if(branch!=-1) {

              try {
                const answer = calcFunction(calcAreaTextConv);
                update( answer());
              } catch( _error) {
                update(_error);
              }  
            } else {

            document.querySelector('#calc').value =0;    
            }
           }


           function percentage() {
            var calcAreaText = document.querySelector('#calc').value;

            var regex = /[+\-\×\÷]/g;

            var branch = calcAreaText.search(regex);
            if(branch!=-1) {


              var operatorSearch = calcAreaText.match(regex);
              
              var operatorLastArray = operatorSearch.length -1;

              var operatorLastindex = calcAreaText.lastIndexOf(operatorSearch[operatorLastArray]) +1;

              var calcText1 = calcAreaText.slice(0,operatorLastindex) + '(';
              var calcText2 = calcAreaText.slice(operatorLastindex) +'÷100)';
              var calcAreaText = calcText1+calcText2;
              var calcAreaTextConv = operatorConversion(calcAreaText);
              try {
                const percentageAnswer = calcFunction(calcAreaTextConv);
                update(percentageAnswer());
              } catch (_error) {
                update(_error );
              }
            } else {
             document.querySelector('#calc').value = 0;  
           }
        }
         </script>    
    </body>
    </html>

例)

def greet
  puts Hello World
end

自分で試したこと

https://magazine.techacademy.jp/magazine/28188 参考にした

0

2Answer

↓のページから持ってきたであろうコードのようですので,よく比較してみてください.

new Functionで生成されるコードがきちんと書かれていません.

サンプルソースが動かないときは必ずdiffを取りましょう.ほぼ間違いなく転記ミスがあります.

…これって要するにJavaScriptの計算式を動的に評価して実行する仕組みですけど,そこまでやる必要があるかどうかは正直謎です(スクリプトとか打ち放題になるの考慮してないのでなおさら).もっといいサンプルはあるでしょうね.

1Like

Comments

  1. 有難うございます。WinMergeで、差分を出したのですが、間違った所がなっかたのですが、もう一回 、見直します。すみません。

returnを使っているところを注力して見れば差分見つかりますね。

- const answer = new Function('return' + calcAreaTextConv);
+ const answer = new Function('return ' + calcAreaTextConv);
1Like

Comments

  1. 返事、超遅くなりました。誠にすみません。仰られるとおり、 const answer = new Function('return ' + calcAreaTextConv);エラーが消えました。returnの後のスペース、たった一つで、表示が変わるのですね。本当に、有難うございました。大変、助かりました。

Your answer might help someone💌