getElementById() 方法不适用于我的最后一个函数

Question

我不明白为什么getElementById((方法不适用于我的最后一个函数。我希望这个函数的结果将出现在出现上一个函数结果的同一位置，请帮我得到这个。如果使用document.writeln，则可以工作，但在新窗口中打开。我无法得到区别。

function Sum(){
var num1= document.getElementById("value1").value;
var num2= document.getElementById("value2").value;
document.getElementById("result").innerHTML = +num1 + +num2;
}
function Difference() {
var num1= document.getElementById("value1").value;
var num2= document.getElementById("value2").value;
document.getElementById("result").innerHTML = +num1 - +num2;
}
function Division() {
var num1= document.getElementById("value1").value;
var num2= document.getElementById("value2").value;
document.getElementById("result").innerHTML = +num1 / +num2;
}
function Multiplication() {
var num1= document.getElementById("value1").value;
var num2= document.getElementById("value2").value;
document.getElementById("result").innerHTML = +num1 * +num2;
}
function testNum() {
var num1= document.getElementById("value1").value;
var num2= document.getElementById("value2").value;
document.write ("<CENTER><TABLE BORDER = '1'>") ;
if ( num1 == num2) {
document.writeln ("<TR><TD>" + num1 +" equal  " + num2 + "</TD></TR>") ;
} else if ( num1 != num2) {
document.writeln ("<TR><TD>" +num1+ " dosen't equal " +num2+ "</TD></TR>") ;
} else if ( num1 < num2) {
document.writeln ("<TR><TD>" +num1+ " less than " +num2+ "</TD></TR>") ;
} else ( num1 > num2)
document.writeln ("<TR><TD>" +num1+ " more than " +num2+ "</TD></TR>") ;
document.writeln ("</TABLE></CENTER>") ;
}

<h2>Onderdeel 1</h2>
<h2>The Sum Program</h2>
<hr />
<table>
<tr>
<td>
<label>Enter A:</label>
</td>
<td>
<input type="text" name="value1" id="value1" value="3"/>
</td>
</tr>
<tr>
<td>
<label>Enter B:</label>
</td>
<td>
<input type="text" name="value2" id="value2" value="4"/>
</td>
</tr>
<tr>
<td>
&nbsp;
</td>
<td>
<input type="button" value="Sum" onclick="Sum()" />
<input type="button" Value="Difference" onClick="Difference()" />
<input type="button" Value="Division" onClick="Division()" />
<input type="button" Value="Multiplication" onClick="Multiplication()" />
<input type="button" Value="testNum" onClick="testNum()" />
</td>
</tr>
</table>
<tr>
<p>The Result is : <br>
<span id = "result"></span>
</p>
</tr>

Answer 1

该问题与document.writein()方法有关，并且未在新选项卡/窗口中打开。事实上，正在发生的事情是你正在写入整个文档对象。 只需打开任何页面并在控制台中运行document.writeln ("</TABLE></CENTER>")，即可看到相同的行为。

解决方案是使用innerHTML.

下面是工作示例：

function Sum() {
var num1 = document.getElementById("value1").value;
var num2 = document.getElementById("value2").value;
document.getElementById("result").innerHTML = +num1 + +num2;
}
function Difference() {
var num1 = document.getElementById("value1").value;
var num2 = document.getElementById("value2").value;
document.getElementById("result").innerHTML = +num1 - +num2;
}
function Division() {
var num1 = document.getElementById("value1").value;
var num2 = document.getElementById("value2").value;
document.getElementById("result").innerHTML = +num1 / +num2;
}
function Multiplication() {
var num1 = document.getElementById("value1").value;
var num2 = document.getElementById("value2").value;
document.getElementById("result").innerHTML = +num1 * +num2;
}
function testNum() {
var num1 = parseInt(document.getElementById("value1").value);
var num2 = parseInt(document.getElementById("value2").value);
var result = document.getElementById("result");
if (num1 == num2) {
result.innerHTML = num1 + " equal  " + num2;
} else if (num1 != num2) {
result.innerHTML = num1 + " not equal  " + num2;
} else if (num1 < num2) {
result.innerHTML = num1 + " less than " + num2;
} else if (num1 > num2) {
result.innerHTML = num1 + " more than " + num2;
}
}

<h2>Onderdeel 1</h2>
<h2>The Sum Program</h2>
<hr />
<table>
<tr>
<td>
<label>Enter A:</label>
</td>
<td>
<input type="text" name="value1" id="value1" value="3" />
</td>
</tr>
<tr>
<td>
<label>Enter B:</label>
</td>
<td>
<input type="text" name="value2" id="value2" value="4" />
</td>
</tr>
<tr>
<td>
&nbsp;
</td>
<td>
<input type="button" value="Sum" onclick="Sum()" />
<input type="button" Value="Difference" onClick="Difference()" />
<input type="button" Value="Division" onClick="Division()" />
<input type="button" Value="Multiplication" onClick="Multiplication()" />
<input type="button" Value="testNum" onClick="testNum()" />
</td>
</tr>
</table>
<tr>
<p>The Result is : <br>
<span id="result"></span>
</p>
</tr>

Answer 2

请在下面找到更新的 testNum 函数供您参考

试试你的工作代码 - https://www.w3schools.com/code/tryit.asp?filename=G7FTZOLCXZMR

function testNum() {
var num1= parseInt(document.getElementById("value1").value);
var num2= parseInt(document.getElementById("value2").value);
var result = document.getElementById("result"); 
if ( num1 == num2) { 
result.innerHTML =  num1 +" equal  " + num2 ;
} else if ( num1 != num2) {
result.innerHTML =  num1 +" not equal  " + num2 ;
} else if ( num1 < num2) { 
result.innerHTML = num1+ " less than " +num2;
} else if(num1 > num2){ 
result.innerHTML = num1+ " more than " +num2;
} 
}

Answer 3

我可以建议一种不同的方法吗？以下是我的建议，以帮助简化此操作：

1. 我建议直接编写HTML，而不是在JavaScript中动态编写HTML
。
2. 使用隐藏/显示功能切换表格和结果
3. 使用条件(三元(运算符提高可读性

下面是一个代码片段作为示例：

function Sum(){
var num1= document.getElementById("value1").value;
var num2= document.getElementById("value2").value;
document.getElementById("result").innerHTML = +num1 + +num2;
show("result");
}
function Difference() {
var num1= document.getElementById("value1").value;
var num2= document.getElementById("value2").value;
document.getElementById("result").innerHTML = +num1 - +num2;
show("result");
}
function Division() {
var num1= document.getElementById("value1").value;
var num2= document.getElementById("value2").value;
document.getElementById("result").innerHTML = +num1 / +num2;
show("result");
}
function Multiplication() {
var num1= document.getElementById("value1").value;
var num2= document.getElementById("value2").value;
document.getElementById("result").innerHTML = +num1 * +num2;
show("result");
}
function testNum() {
var num1= document.getElementById("value1").value;
var num2= document.getElementById("value2").value;
var result;
// using conditional (ternary) operator for readability
result = num1 === num2 ? num1 + " equal " + num2 : result;
result = num1 !== num2 ? num1 + " dosen't equal " + num2 : result;
result = num1 < num2 ? num1 + " less than " + num2 : result;
result = num1 > num2 ? num1 + " more than " + num2 : result;
document.getElementById("table-result").innerHTML = result;
show("table");
}
function show(id) {
if (id === "table") {
document.getElementById("result").style.display = "none";                           
document.getElementById("table").style.display = "block";
} else {
document.getElementById("result").style.display = "block";                          
document.getElementById("table").style.display = "none";
}
}

<h2>Onderdeel 1</h2>
<h2>The Sum Program</h2>
<hr />
<table>
<tr>
<td>
<label>Enter A:</label>
</td>
<td>
<input type="text" name="value1" id="value1" value="3"/>
</td>
</tr>
<tr>
<td>
<label>Enter B:</label>
</td>
<td>
<input type="text" name="value2" id="value2" value="4"/>
</td>
</tr>
<tr>
<td>
&nbsp;
</td>
<td>
<input type="button" value="Sum" onclick="Sum()" />
<input type="button" Value="Difference" onClick="Difference()" />
<input type="button" Value="Division" onClick="Division()" />
<input type="button" Value="Multiplication" onClick="Multiplication()" />
<input type="button" Value="testNum" onClick="testNum()" />
</td>
</tr>
</table>
<tr>
<p>The Result is : <br>
<span id="result"></span>
</p>
<table id="table" border="1" style="display:none">
<tr>
<td><span id="table-result"></span></td>
</tr>
</table>
</tr>