javascript - Calculator Project for Uni - JavaScript Code not working
问题描述
I am following a Uni class on JavaScript, which purpose is to make a simple calculator, that performs simple operations on two numbers. The following is the HTML code I have made:
<html>
<head>
<title>Simple Maths with JavaScript</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="script.js"></script>
</head>
<body>
<h2>Simple Maths</h2>
<p>
Value 1:
<input type="text" id="value1" value="0"/>
</p>
<p>
Value 2:
<input type="text" id="value2" value="0"/>
</p><p>
Result:
<input type="text" id="result" value="0" readonly="readonly"/>
</p>
<input type="button" value="+" onclick="doAdd()"/>
<input type="button" value="-" onclick="doSub()"/>
<input type="button" value="*" onclick="doMul()"/>
<input type="button" value="/" onclick="doDiv()"/>
</body>
Then I made an external JavaScript Code for all the functions:
function doAdd() {
var value1 = new number(document.getElementById("value1").value);
var value2 = new number(document.getElementById("value2").value);
document.getElementById("result").setAttribute("value", value1 + value2);
}
function doSub() {
var value1 = new number(document.getElementById("value1").value);
var value2 = new number(document.getElementById("value2").value);
document.getElementById("result").setAttribute("value", value1 - value2);
}
function doMul() {
var value1 = new number(document.getElementById("value1").value);
var value2 = new number(document.getElementById("value2").value);
document.getElementById("result").setAttribute("value", value1 * value2);
}
function doDiv() {
var value1 = new number(document.getElementById("value1").value);
var value2 = new number(document.getElementById("value2").value);
document.getElementById("result").setAttribute("value", value1 / value2);
}
Note: <!doctype>
, header
, comments
, etc. have been left out purposely here, to shorten the code.
Now, when I run the page, it does nothing. I add two numbers and click the buttons but they won't do anything. Also tried to change the value1
and value2
attributes, so that contain a number (ex. 5 and 5) but it still won't work. The script seems to be working fine however (linking, etc.) since document.write("Hello, I am working!");
which I had added for testing purposes, did display just fine.
I have checked the code in the class materials as well as the hints like 10 times. I can't seem to find out why it is not working... Any advice would be appreciated.
解决方案
这是区分大小写的问题
1. 将 onclick 从更改DoAdd()
为doAdd()
2. 更改new number()
为new Number()
查看此参考
<h2>Simple Maths</h2>
<p>
Value 1:
<input type="text" id="value1" value="0" />
</p>
<p>
Value 2:
<input type="text" id="value2" value="0" />
</p>
<p>
Result:
<input type="text" id="result" value="0" readonly="readonly" />
</p>
<input type="button" value="+" onclick="doAdd()" />
<input type="button" value="-" onclick="doSub()" />
<input type="button" value="*" onclick="doMul()" />
<input type="button" value="/" onclick="doDiv()" />
<script>
function doAdd() {
var value1 = new Number(document.getElementById("value1").value);
var value2 = new Number(document.getElementById("value2").value);
document.getElementById("result").setAttribute("value", value1 + value2);
}
function doSub() {
var value1 = new Number(document.getElementById("value1").value);
var value2 = new Number(document.getElementById("value2").value);
document.getElementById("result").setAttribute("value", value1 - value2);
}
function doMul() {
var value1 = new Number(document.getElementById("value1").value);
var value2 = new Number(document.getElementById("value2").value);
document.getElementById("result").setAttribute("value", value1 * value2);
}
function doDiv() {
var value1 = new Number(document.getElementById("value1").value);
var value2 = new Number(document.getElementById("value2").value);
document.getElementById("result").setAttribute("value", value1 / value2);
}
</script>
推荐阅读
- oracle - 您可以在同时连接不同元素的 listagg 函数中插入回车吗?
- node.js - 当机器人在 Teams 中发送消息时,我如何获得通知?
- python - 适用于 python 的 Sonarqube:未发现测试成功分数 - 未找到“tests.test_transformation_helper.TestCase”的资源
- java - 用于配置、生成、监控、停止长任务 java 的 rest 接口
- javascript - Vue - 使用插件作为原型
- excel - 访问 Excel:减少 Excel VBA 的运行时间
- cassandra - Cassandra timeuuid 列到纳秒精度
- python - Paramiko ssh/sftp 多个命令
- c# - .NET Core Entity Framework 如何从模型创建表
- java - 扩展现有的 webflowconfigurer(CAS webflow)是否可行?