javascript - 实时更新位于 DIV 中的文本内容

Question

我正在使用 css、html 和 js 创建一个基本的计算器。我有一个功能如下:

        document.getElementById('user_radius').onkeyup = function () 

        {
            document.getElementById('live_update').innerHTML = this.value;
        }  

基本上，无论在用户文本框中输入什么内容，都应该实时更新位于 span 标签内的文本，其 ID 为“live_update”。我有一个 id 为 user_radius 的文本框。我保存了更改，但无法让文本实时更新。我是否遗漏了一个基本原则？

Answer 1

有多种方法可以做到这一点

1.混合javascript和DOM。这使得将来调试您的东西有点困难。

<input id='user_radius' onkeypress='doSomething()' />

function doSomething() {
    document.getElementById('live_update').innerHTML = this.value;
}

2.标准jquery方法:

<script type="text/javascript">
    $(document).ready(function(){
        $('#live_update').on('keyup', function(){
            $('#user_radius').val($('#live_update').val());
        });
    });
</script>

3.找一个为你做双向数据绑定(bind)的前端框架比如Angular

演示:http://www.angularjshub.com/examples/basics/twowaydatabinding/