Javascript html css
Q&A
Closed
解決したいこと
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