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

这应该做的工作：

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

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

Answer 2

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

1.mix 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.找一个为你做双向数据绑定的前端框架，比如Angular

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

实时更新DIV中的文本内容

2 个答案: