Question

我正在遵循JavaScript的Uni类，其目的是制作一个简单的计算器，对两个数字执行简单的运算。以下是我编写的HTML代码：

<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>

然后，我为所有功能制作了一个外部JavaScript代码：

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);
}

注意：此处故意将<!doctype>，header，comments等遗漏，以缩短代码。

现在，当我运行页面时，它什么也没做。我将两个数字相加并单击按钮，但它们不会执行任何操作。还尝试更改value1和value2属性，使其包含数字（例如5和5），但仍然无法使用。该脚本似乎工作正常（链接等），因为我为测试目的添加的document.write("Hello, I am working!");确实显示得很好。

我已经检查了课程资料中的代码以及10次提示。我似乎无法找出为什么它不起作用...任何建议都将不胜感激。

Answer 1

这是一个区分大小写的问题
1.将onclick从DoAdd()更改为doAdd()
2.将new number()更改为new Number()，请参见此Reference

<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>

Uni的计算器项目-JavaScript代码不起作用

1 个答案: