Javascript document.getElementById（'；id'；）.innerHTML="；“一些价值”；变化不'；不反映_Javascript_Html_Forms_Submit_Innerhtml

Javascript document.getElementById（'；id'；）.innerHTML="；“一些价值”；变化不'；不反映

javascript html forms

Javascript document.getElementById（'；id'；）.innerHTML="；“一些价值”；变化不'；不反映,javascript,html,forms,submit,innerhtml,Javascript,Html,Forms,Submit,Innerhtml,我有下面提到的代码，innerHTML所做的更改不会反映在浏览器中 <body> <script TYPE="text/javascript"> function change(){ document.getElementById("op").innerHTML="this works!"; prompt(document.getElementById("op").innerHTML); } </script>

我有下面提到的代码，innerHTML所做的更改不会反映在浏览器中

<body>

<script TYPE="text/javascript">
    function change(){
        document.getElementById("op").innerHTML="this works!";
        prompt(document.getElementById("op").innerHTML);
    }
</script>

<form onSubmit="change()">
    <table>
        <tr>
            <td id="a1">This</td>
           <td id="a2"><input type="text" id="t1"></td>
        </tr>
    </table>
    <input type="submit" value="submit">
</form>


函数更改（）{
document.getElementById（“op”）.innerHTML=“这很有效！”；
提示符（document.getElementById（“op”）.innerHTML）；
}
这

//输出

    <table>
        <tr><td id="op"></td></tr>
    </table>

    </body>
</html>

如提示符所示，更改确实发生了，但不会反映在页面上。

JavaScript是单线程的。在将值分配给

innerHTML

的函数完成之前，浏览器不会运行重新绘制事件

在清除提示（这是一个阻塞函数）之前，该函数不会完成

此时，由于表单是由提交按钮触发的，因此将立即提交表单并加载新页面（将使表格单元格的内容恢复到原始状态）

取消窗体的默认事件

90年代风格：

function change()
{
  document.getElementById("op").innerHTML="this works!";
  prompt(document.getElementById("op").innerHTML);
  return false;
}

onSubmit="return change()">

现代风格：

function change(event)
{
  event.preventDefault();
  document.getElementById("op").innerHTML="this works!";
  prompt(document.getElementById("op").innerHTML);
}
document.querySelector('form').addEventListener("submit", change);