JavaScript 函数单独工作但不能协同工作

Question

今天我开始构建一个虚拟客户端 Web 应用程序项目，以提高我的基本 JavaScript 技能。基本上，它是一种在线运行的科学计算器仿制品。正如您将在代码中看到的那样，我的 HTML 文件中有一些按钮，每个按钮都调用我的 JavaScript 文件中的 JavaScript 函数之一。计算器根本不工作，我的意思是，在我尝试调试时，我的 JavaScript 文件中的每个函数都按预期自行工作，但似乎它们不能一起工作。

这是我的代码：

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

/**
* Auxiliary functions
*/

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

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

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

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

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

/**
* Calculator functions
*/

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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>

感谢任何帮助。

Answer 1

我能够获得一些功能，（有一些括号错误）。如果它根本不工作，我怀疑你在 DOM 准备好之前加载了 javascript，这会导致你 getElementById 出错。尝试加载 window.onload 处理程序或将脚本放在结束正文标记之前。

JavaScript 函数单独工作但不能协同工作

JavaScript functions working by themselves but not working together

javascript

user-defined-functions