JavaScript函数自己工作但不能一起工作

时间：2017-07-22 03:00:31

标签： javascript user-defined-functions

今天我开始构建一个虚拟的客户端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>

感谢任何帮助。

1 个答案:

答案 0 :(得分：0)

我能够获得一些功能，（带有一些括号错误）。如果它没有全部工作，我怀疑你在DOM准备好之前加载了javascript，这会导致你//This code is inside of viewDidLoad function makeButtonWithName(button: answer0B, title: "0", font: "HelveticaNeue", fontSize: resetHeight, frame: CGRect(x:width/2 - viewWidth/2, y: firstViewY, width: viewWidth, height: viewHeight), selector: #selector(self.answer0(_:))) makeButtonWithName(button: answer1B, title: "0", font: "HelveticaNeue", fontSize: resetHeight, frame: CGRect(x:width/2 - viewWidth/2, y: secondViewY, width: viewWidth, height: viewHeight), selector: #selector(self.answer1(_:))) makeButtonWithName(button: answer2B, title: "0", font: "HelveticaNeue", fontSize: resetHeight, frame: CGRect(x:width/2 - viewWidth/2, y: thirdViewY, width: viewWidth, height: viewHeight), selector: #selector(self.answer2(_:))) makeButtonWithName(button: answer3B, title: "0", font: "HelveticaNeue", fontSize: resetHeight, frame: CGRect(x:width/2 - viewWidth/2, y: fourthViewY, width: viewWidth, height: viewHeight), selector: #selector(self.answer3(_:))) firstNumber = Int(arc4random_uniform(9)) secondNumber = Int(arc4random_uniform(9)) incorrectAnswer1 = Int(arc4random_uniform(18)) incorrectAnswer2 = Int(arc4random_uniform(18)) incorrectAnswer3 = Int(arc4random_uniform(18)) timer.invalidate() seconds = 31 runTimer() randomNumbers() //End viewDidLoad function func answer0(_ sender: UIButton!){ let a:Int? = Int((answer0B.titleLabel?.text)!) if a == answerNumber{ correctIncorrectLabel.text = "Correct" correctIncorrectLabel.textColor = UIColor.green correctNumber += 1 } else{ correctIncorrectLabel.text = "Incorrect" correctIncorrectLabel.textColor = UIColor.red } randomNumbers() } func answer1(_ sender: UIButton!){ let b:Int? = Int((answer1B.titleLabel?.text)!) if b == answerNumber{ correctIncorrectLabel.text = "Correct" correctIncorrectLabel.textColor = UIColor.green correctNumber += 1 } else{ correctIncorrectLabel.text = "Incorrect" correctIncorrectLabel.textColor = UIColor.red } randomNumbers() } func answer2(_ sender: UIButton!){ let c:Int? = Int((answer2B.titleLabel?.text)!) if c == answerNumber{ correctIncorrectLabel.text = "Correct" correctIncorrectLabel.textColor = UIColor.green correctNumber += 1 } else{ correctIncorrectLabel.text = "Incorrect" correctIncorrectLabel.textColor = UIColor.red } randomNumbers() } func answer3(_ sender: UIButton!){ let d:Int? = Int((answer3B.titleLabel?.text)!) if d == answerNumber{ correctIncorrectLabel.text = "Correct" correctIncorrectLabel.textColor = UIColor.green correctNumber += 1 } else{ correctIncorrectLabel.text = "Incorrect" correctIncorrectLabel.textColor = UIColor.red } randomNumbers() printProblem() } func randomNumbers(){ firstNumber = Int(arc4random_uniform(9)) secondNumber = Int(arc4random_uniform(9)) answerNumber = firstNumber + secondNumber printProblem() randomButton = Int(arc4random_uniform(4)) incorrectAnswer1 = Int(arc4random_uniform(18)) incorrectAnswer2 = Int(arc4random_uniform(18)) incorrectAnswer3 = Int(arc4random_uniform(18)) showTextOnButton() totalCorrect.text = "Total Correct: \(correctNumber)" } func showTextOnButton(){ if randomButton == 0 { answer0B.setTitle("\(answerNumber)", for: .normal) answer1B.setTitle("\(incorrectAnswer1)", for: .normal) answer2B.setTitle("\(incorrectAnswer2)", for: .normal) answer3B.setTitle("\(incorrectAnswer3)", for: .normal) } if randomButton == 1 { answer1B.setTitle("\(answerNumber)", for: .normal) answer0B.setTitle("\(incorrectAnswer1)", for: .normal) answer2B.setTitle("\(incorrectAnswer2)", for: .normal) answer3B.setTitle("\(incorrectAnswer3)", for: .normal) } if randomButton == 2 { answer1B.setTitle("\(answerNumber)", for: .normal) answer2B.setTitle("\(incorrectAnswer1)", for: .normal) answer0B.setTitle("\(incorrectAnswer2)", for: .normal) answer3B.setTitle("\(incorrectAnswer3)", for: .normal) } if randomButton == 3 { answer1B.setTitle("\(answerNumber)", for: .normal) answer2B.setTitle("\(incorrectAnswer1)", for: .normal) answer3B.setTitle("\(incorrectAnswer2)", for: .normal) answer0B.setTitle("\(incorrectAnswer3)", for: .normal) } } func printProblem(){ questionLabel.text = "\(firstNumber) + \(secondNumber)" } func makeButtonWithName(button: UIButton,title: String, font: String, fontSize: Int, frame: CGRect, selector: Selector) { let button = UIButton(type: UIButtonType.custom) button.setTitle(title, for: .normal) button.frame = frame button.setTitleColor(UIColor.white, for: .normal) button.titleLabel?.font = UIFont(name: font, size: CGFloat(fontSize)) button.addTarget(self, action: selector, for: .touchUpInside) self.view.addSubview(button) } 出错。尝试加载getElementById处理程序或将脚本放在结束正文标记之前。

相关问题
最新问题