JavaScript関数自体は機能していますが、連携していません

今日、基本的なJavaScriptスキルを向上させるために、クライアント側のダミーのWebアプリケーションプロジェクトを構築しました。基本的に、それはオンラインで実行される科学計算機の模造品です。コードでわかるように、HTMLファイルにはJavaScriptファイル内のJavaScript関数のいずれかを呼び出すボタンがあります。計算機は機能しません。つまり、まったく意味がありません。デバッグを試してみると、自分のJavaScriptファイル内のすべての関数が意図したとおりに動作しますが、一見すると一緒に機能しません。すべてのヘルプは高く評価されJavaScript関数自体は機能していますが、連携していません

var currentMode = 'deg'; 
 
var screen = document.getElementById("screen"); 
 
var lastChar = screen.value.slice(-1); 
 

 
/** 
 
* Auxiliary functions 
 
*/ 
 

 
function isNumeric(val) { 
 
\t return !isNaN(parseFloat(val)) && isFinite(val); 
 
} 
 

 
function sine(val) { 
 
\t if (currentMode === 'deg') { 
 
\t \t return Math.sin(Math.PI * val/180); 
 
\t } 
 
\t return Math.sin(val); 
 
} 
 

 
function cos(val) { 
 
\t if (currentMode === 'deg') { 
 
\t \t return Math.cos(Math.PI * val/180); 
 
\t } 
 
\t return Math.cos(val); 
 
} 
 

 
function tan(val) { 
 
\t if (currentMode === 'deg') { 
 
\t \t return Math.tan(Math.PI * val/180); 
 
\t } 
 
\t return Math.tan(val); 
 
} 
 

 
function ln(val) { 
 
\t return Math.log(val); 
 
} 
 

 
/** 
 
* Calculator functions 
 
*/ 
 

 
function addSpecial(val) { 
 
\t var nums = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9']; 
 
\t var operations = ['+', '-', '*', '/', '^']; 
 
\t 
 
\t if (screen.value === '0') { 
 
\t \t if (nums.indexOf(val) >= 0) 
 
\t \t \t screen.value = val; 
 
\t \t else if (val === '.' || operations.indexOf(val) >= 0) 
 
\t \t \t screen.value += val; 
 
\t \t else 
 
\t \t \t screen.value = '0'; 
 
\t } else if (lastChar === '.' || operations.indexOf(lastChar) >= 0) { 
 
\t \t if (val !== '.' && val !== '=' && operations.indexOf(val) < 0) 
 
\t \t \t screen.value += val; 
 
\t } else { 
 
\t \t if (val !== '=') 
 
\t \t \t screen.value += val; 
 
\t \t else { 
 
\t \t \t if (lastChar === '.' || operations.indexOf(lastChar) >= 0) 
 
\t \t \t \t screen.value = 'SYNTAX ERROR!'; 
 
\t \t \t else if (screen.value.split('(') !== screen.value.split(')')) 
 
\t \t \t \t screen.value = 'ERROR! Open or close parantheses!'; 
 
\t \t \t else { 
 
\t \t \t \t try { 
 
\t \t \t \t \t screen.value = eval(screen.value); 
 
\t \t \t \t } catch(err) { 
 
\t \t \t \t \t screen.value = err.message; 
 
\t \t \t \t } 
 
\t \t \t } 
 
\t \t } 
 
\t } 
 
} 
 

 
function setAngleMode(newMode) { 
 
\t if (newMode === 'rad') { 
 
\t \t if (currentMode === 'deg') { 
 
\t \t \t currentMode = 'rad'; 
 
\t \t \t screen.value *= Math.PI/180; 
 
\t \t } 
 
\t } else { 
 
\t \t if (currentMode === 'rad') { 
 
\t \t \t currentMode = 'deg'; 
 
\t \t \t screen.value *= 180/Math.PI; 
 
\t \t } 
 
\t } 
 
} 
 

 
function addSymbol(val) { 
 
\t switch (val) { 
 
\t \t case 'pi': 
 
\t \t \t screen.value = Math.PI; 
 
\t \t \t break; 
 
\t \t case 'e': 
 
\t \t \t screen.value = Math.E; 
 
\t \t \t break; 
 
\t \t case 'phi': 
 
\t \t \t screen.value = 1.61803398875; 
 
\t \t \t break; 
 
\t \t case 'gamma': 
 
\t \t \t screen.value = 0.5772156649; 
 
\t } 
 
} 
 

 
function clearScreen() { 
 
\t screen.value = ''; 
 
} 
 

 
function clearLast() { 
 
\t screen.value.slice(0, -1); 
 
} 
 

 
function inverseVal() { 
 
\t var len = screen.value.length; 
 
\t var subs; 
 
\t for (var i = 0; i < len; ++i) { 
 
\t \t for (var j = len; j > i; --j) { 
 
\t \t \t subs = screen.value.slice(i, j); 
 
\t \t \t if (isNumeric(subs)) { 
 
\t \t \t \t screen.value = 1/parseFloat(subs); 
 
\t \t \t \t break; 
 
\t \t \t } 
 
\t \t } 
 
\t } 
 
} 
 

 
function addSquare() { 
 
\t if (isNumeric(lastChar) || lastChar === ')') { 
 
\t \t screen.value += '^2'; 
 
\t } 
 
} 
 

 
function addPower() { 
 
\t if (isNumeric(lastChar) || lastChar === ')') { 
 
\t \t screen.value += '^'; 
 
\t } 
 
} 
 

 
function addSquareroot() { 
 
\t if (isNumeric(lastChar) || lastChar === ')') { 
 
\t \t screen.value += '^(1/2)'; 
 
\t } 
 
} 
 

 
function addRoot() { 
 
\t if (isNumeric(lastChar) || lastChar === ')') { 
 
\t \t screen.value += '^(1/'; 
 
\t } 
 
} 
 

 
function addExp() { 
 
\t if (isNumeric(lastChar) || lastChar === ')') { 
 
\t \t screen.value += 'Math.E^'; 
 
\t } 
 
} 
 

 
function addSin() { 
 
\t if (isNumeric(lastChar) || lastChar === ')') { 
 
\t \t screen.value += 'sine('; 
 
\t } 
 
} 
 

 
function addCos() { 
 
\t if (isNumeric(lastChar) || lastChar === ')') { 
 
\t \t screen.value += 'cos('; 
 
\t } 
 
} 
 

 
function addTan() { 
 
\t if (isNumeric(lastChar) || lastChar === ')') { 
 
\t \t screen.value += 'tan('; 
 
\t } 
 
} 
 

 
function addLn() { 
 
\t if (isNumeric(lastChar) || lastChar === ')') { 
 
\t \t screen.value += 'ln('; 
 
\t } 
 
}

h5 { 
 
    text-align: right; 
 
    color: #333333; 
 
    font-family: Arial; 
 
    font-size: 12px; 
 
    font-weight: bold; 
 
    margin: 3px; 
 
} 
 

 
input[type=text] { 
 
    text-align: right; 
 
    height: 50px; 
 
    width: 176px; 
 
    padding: 6px; 
 
    border: 10px groove #888888; 
 
    background-color: #E5DFA0; 
 
    font-family: Luicida, monospace; 
 
} 
 

 
.scientific { 
 
    position: relative; 
 
    top:0px; 
 
    left: 33px; 
 
} 
 

 
.scientific input[type=button] { 
 
    width: 28px; 
 
    height: 28px; 
 
    background-color: #444444; 
 
    color: #BBBBBB; 
 
    font-family: Verdana; 
 
    font-size: 8px; 
 
    font-weight: bold; 
 
    padding: 2px; 
 
    margin-top: 2px; 
 
    margin-right: 2.5px; 
 
    margin-bottom: 0px; 
 
    margin-left: 2.5px; 
 
    border: none; 
 
} 
 

 
.scientific input[type=button].cardinal { 
 
    width: 28px; 
 
    height: 28px; 
 
    background-color: red; 
 
    color: white; 
 
    font-family: Verdana; 
 
    font-size: 8px; 
 
    font-weight: bold; 
 
    padding: 2px; 
 
    margin-top: 2px; 
 
    margin-right: 2.5px; 
 
    margin-bottom: 0px; 
 
    margin-left: 2.5px; 
 
    border: none; 
 
} 
 

 
.scientific input[type=image] { 
 
    width: 24px; 
 
    height: 24px; 
 
    background-color: #444444; 
 
    padding: 2px; 
 
    margin-top: 2px; 
 
    margin-right: 2.5px; 
 
    margin-bottom: 0px; 
 
    margin-left: 2.5px; 
 
    border: none; 
 
} 
 

 
.simple input[type=button] { 
 
    width: 32px; 
 
    height: 32px; 
 
    background-color: #EEEEEE; 
 
    color: #222222; 
 
    font-family: Verdana; 
 
    font-size: 11px; 
 
} 
 

 
.simple input[type=button].roman { 
 
    font-family: "Times New Roman", serif; 
 
    font-size: 13px; 
 
} 
 

 
#calc-contain { 
 
    width: 180px; 
 
    margin: 0px auto; 
 
}

<html> 
 
    <head> 
 
     <title>::Scientific Calculator::</title> 
 
     <link rel="stylesheet" type="text/css" href="main.css" /> 
 
     <script type="text/javascript" src="engine.js"></script> 
 
    </head><body> 
 
     <div id="calc-contain"> 
 
      <img src="EnData.png" alt="EnData" width="180px" /> 
 
      <h5>SCIENTIFIC CALCULATOR</h5> 
 
      <form id="calculator"> 
 
       <input type="text" id="screen" value="0" readonly /> 
 
       
 
       <div class="scientific"> 
 
        <div class="line"> 
 
         <input type="button" value="RAD" onclick="setAngleMode('rad')" /> 
 
         <input type="button" value="DEG" onclick="setAngleMode('deg')" /> 
 
         <input type="button" class="cardinal" value="C" onclick="clearScreen()" /> 
 
         <input type="button" class="cardinal" value="CE" onclick="clearLast()" /> 
 
        </div><div class="line"> 
 
         <input type="button" value="sin" onclick="addSin()" /> 
 
         <input type="button" value="cos" onclick="addCos()" /> 
 
         <input type="button" value="tan" onclick="addTan()" /> 
 
         <input type="button" value="ln" onclick="addLn()" /> 
 
        </div><div class="line"> 
 
         <input type="image" src="sqr.png" alt="square" onclick="addSquare()" /> 
 
         <input type="image" src="nthp.png" alt="nth power" onclick="addPower()" /> 
 
         <input type="image" src="sqrt.png" alt="square root" onclick="addSquareroot()" /> 
 
         <input type="image" src="nthr.png" alt="nth root" onclick="addRoot()" /> 
 
        </div><div class="line"> 
 
         <input type="button" value="1/x" onclick="inverseVal()" /> 
 
         <input type="button" value="(" onclick="addSpecial('(')" /> 
 
         <input type="button" value=")" onclick="addSpecial(')')" /> 
 
         <input type="button" value="exp" onclick="addExp()" /> 
 
        </div> 
 
       </div> 
 
       
 
       <div class="simple"> 
 
        <div class="line"> 
 
         <input type="button" class="roman" value="&#960;" onclick="addSymbol('pi')" /> 
 
         <input type="button" value="7" onclick="addSpecial('7')" /> 
 
         <input type="button" value="8" onclick="addSpecial('8')" /> 
 
         <input type="button" value="9" onclick="addSpecial('9')" /> 
 
         <input type="button" value=":" onclick="addSpecial('/')" /> 
 
        </div><div class="line"> 
 
         <input type="button" class="roman" value="e" onclick="addSymbol('e')" /> 
 
         <input type="button" value="4" onclick="addSpecial('4')" /> 
 
         <input type="button" value="5" onclick="addSpecial('5')" /> 
 
         <input type="button" value="6" onclick="addSpecial('6')" /> 
 
         <input type="button" value="x" onclick="addSpecial('*')" /> 
 
        </div><div class="line"> 
 
         <input type="button" class="roman" value="&#966;" onclick="addSymbol('phi')" /> 
 
         <input type="button" value="1" onclick="addSpecial('1')" /> 
 
         <input type="button" value="2" onclick="addSpecial('2')" /> 
 
         <input type="button" value="3" onclick="addSpecial('3')" /> 
 
         <input type="button" value="-" onclick="addSpecial('-')" /> 
 
        </div><div class="line"> 
 
         <input type="button" class="roman" value="&#947;" onclick="addSymbol('gamma')" /> 
 
         <input type="button" value="0" onclick="addSpecial('0')" /> 
 
         <input type="button" value="." onclick="addSpecial('.')" /> 
 
         <input type="button" value="=" onclick="addSpecial('=')" /> 
 
         <input type="button" value="+" onclick="addSpecial('+')" /> 
 
        </div> 
 
       </div> 
 
      </form> 
 
     </div> 
 
    </body> 
 
</html>

：

は、ここに私のコードです。

出典

2017-07-22 Anonymous

いくつかの機能を得ることができました（かっこのエラーがいくつかあります）。あなたがDOMを準備する前にjavacriptをロードしていると思われ、エラーが発生する場合があります。getElementByIdwindow.onloadハンドラにロードするか、閉じたbodyタグの前にスクリプトを挿入してください。

出典

2017-07-22 03:09:59

答えていただきありがとうございます。私のjavascriptコードやhtmlから呼び出された方法で、すべての点ですべての権利は正しいですか？ –

私はすべてがうまくいくとは思わない。私が '3 + 3 ='とタイプすると、私は "ERROR！Open parantheses parantheses！"しかし、 '3 1/x'と打つと正しい答えが得られます。 –

ありがとうございます。（+1）。私は今問題を解決しようとしています。 –

JavaScript関数自体は機能していますが、連携していません

答えて

関連する問題