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