Question

我似乎无法理解document.getElementById("").innerHTML alert("")如何运作 - 所以功能很好。

在我迄今为止所做的每一次大学练习中，我都尝试使用getElement ... innerHTML，因为我认为这是一种更有用的做法比alert/document.write更重要的事情，......永远不会有效。

我错过了一些关于它的关键规则吗？

这是一个非常早期的日子。没有用的例子：

<html>
<head>
<title>total of 3</title>
<script language="javascript">
    function total()
    {
        var number1 = 0;
        var number2 = 0;
        var number3 = 0;
        var total = 0;

        number1 = parseInt(document.m.number1.value);
        number2 = parseInt(document.m.number2.value);
        number3 = parseInt(document.m.number3.value);
        total = number1 + number2 + number3;

        alert("your total is " + total);
        document.getElementById("a").innerHTML = total;

    }
</script>

</head>

<body>
<form name="m">
<table border="1" width="500" height="100">
<tr>
    <td>First Number</td>
    <td><input name="number1" type="text"></td>
</tr>
<tr>
    <td>Second Number</td>
    <td><input name="number2" type="text"></td>
</tr>
<tr>
    <td>Third Number</td>
    <td><input name="number3" type="text"></td>
</tr>
<tr>
    <td align="right"><input type="Reset" name="Reset" id="Reset" value="Reseet"></td>
    <td><input type="submit" name="Submit" id="Submit" value="Submit" onClick="total()"></td>
</tr>
</table>
</form>
<p id="a"></p>
</body>
</html>

Answer 1

这种情况正在发生，因为您正在使用提交按钮，因此您的表单会提交并导致页面更改（或在此情况下重新加载，因为您没有操作）。

因为它重新加载你丢失了你已经改变的任何东西。您可以使用preventDefault来停止事件的默认操作，在此示例中阻止表单提交。

由于你使用内联js，你必须将事件对象传递给你的整个函数，然后在它上面调用preventDefault（）。

<input type="submit" name="Submit" id="Submit" value="Submit" onClick="total(event)">

然后在你的JS中

function total(event){
  event.preventDefault();
  //...rest of your code
}

演示

function total(event){
  event.preventDefault();
  var number1=0;
  var number2=0;
  var number3=0;
  var total=0;

  number1=parseInt(document.m.number1.value);
  number2=parseInt(document.m.number2.value);
  number3=parseInt(document.m.number3.value);
  total=number1+number2+number3;

  alert("your total is "+total);
  document.getElementById("a").innerHTML= total;

}

<form name="m">
<table border="1" width="500" height="100">
<tr>
    <td>First Number</td>
    <td><input name="number1" type="text"></td>
</tr>
<tr>
    <td>Second Number</td>
    <td><input name="number2" type="text"></td>
</tr><tr>
    <td>Third Number</td>
    <td><input name="number3" type="text"></td>

</tr><tr>
    <td align="right"><input type="Reset" name="Reset" id="Reset" value="Reseet"></td>
    <td><input type="submit" id="Submit" name="submit" value="Submit" onClick="total(event)"></td>
</tr>
</table>
</form>
<p id="a"></p>

Answer 2

将您的输入类型从提交更改为输入类型按钮 .....

<td><input type="button" name="Submit" id="Submit" value="Submit" onClick="total()"></td>

因为使用提交，您刷新了自己的网页，因此无法看到结果..

使用按钮页面不会刷新，您将获得结果：p

Answer 3

这是因为您正在提交表单，因此当您单击该按钮时，它会刷新页面，从而不会运行写入页面的脚本部分。

警报暂停执行脚本（并暂停刷新），这就是警报部分工作的原因。

要防止表单刷新页面，您应该阻止对提交事件的默认。

所以，对于你的总功能：

function total()
{

    var number1=0;
    var number2=0;
    var number3=0;
    var total=0;

    number1=parseInt(document.m.number1.value);
    number2=parseInt(document.m.number2.value);
    number3=parseInt(document.m.number3.value);
    total=number1+number2+number3;

    alert("your total is "+total);
    document.getElementById("a").innerHTML= total;
    event.preventDefault();

}

虽然这在Chrome中可以正常使用，但某些浏览器可能需要您将该事件与该功能一起传递。所以将它作为参数发送给你的整个函数。

Answer 4

您的代码正在运行，它不会更改内部HTML，因为submit按钮会刷新页面。试试：

<input type="submit" name="Submit" id="Submit" value="Submit" onClick="total();return false;" >

Answer 5

参考更正后的代码，这里有效，但你需要加一些延迟时间，否则它只会闪一次

<html>
<head>
<title>total of 3</title>


</head>

<body>
<form name="m">
<table border="1" width="500" height="100">
<tr>
    <td>First Number</td>
    <td><input name="number1" type="text"></td>
</tr>
<tr>
    <td>Second Number</td>
    <td><input name="number2" type="text"></td>
</tr><tr>
    <td>Third Number</td>
    <td><input name="number3" type="text"></td>

</tr><tr>
    <td align="right"><input type="Reset" name="Reset" id="Reset" value="Reseet"></td>
    <td><input type="submit" name="Submit" id="Submit" value="Submit" onClick="total()"></td>
</tr>
</table>
<p id="a"></p>
</form>
<script >

function total()
    {

var number1=0;
var number2=0;
var number3=0;
var total=0;

    number1=parseInt(document.m.number1.value);
    number2=parseInt(document.m.number2.value);
    number3=parseInt(document.m.number3.value);
    total=number1+number2+number3;
alert("your total is "+total);

document.getElementById("a").innerHTML = total;

    }


</script>

</body>
</html>

getElementByID（）。innerHTML永远不适合我

5 个答案: