javascript - document.getElementById ('id' ).innerHTML ="some value"更改未反射(reflect)

标签 javascript html forms submit innerhtml

我有下面提到的代码,innerHTML 所做的更改不会反射(reflect)在浏览器中

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

//输出

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

    </body>
</html>

如提示所示,更改确实发生,但未反射(reflect)在页面上。

最佳答案

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

关于javascript - document.getElementById ('id' ).innerHTML ="some value"更改未反射(reflect),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25820727/

相关文章:

javascript - Openlayers 标记在多个标记上单击事件

javascript - 订阅youtube js

javascript - 根据所选的 HTML 按钮更改 JS 变量的值?

css - 我可以有一个全宽 (100%) 的页脚和一个 80% 的页眉吗? (CSS, HTML5)

javascript - 让 chrome、IE 8 和 Firefox 提交相同表单的奇怪方法

php - 使用 class-search.php 将 PHP MYSQL 搜索结果制成表格

javascript - 当用户更改选择的值时清除特定字段

javascript - 我应该每次都使用 Meteor.userId() 还是应该将它存储在语言环境变量中?

javascript - 如何将 var 添加到文本 javascript

HTML "clean-up"服务 : transformation of inline style attributes into css rules