javascript - 通过实时计算传递div（数字）中的文本？

Question

由于缺乏更好的标题，我希望以我在jsfiddle中的示例为例，并将其转换为 div 中的数字（它始终是一个数字）：

<div class="output" id="i1">100</div>

并将该数字通过公式传递，实时将其吐出到p标签（不需要是 ap 标签，可以是另一个 div。

<p>200</p> or <div id="i2">200</div>

上面的 200 是通过将 div id #i1 的原始值加上 100 来计算的。现在，小提琴显示当您输入一个值时，它会输出实时计算。

所以问题是，如果不是输入值，函数会从 DIV 标签中提取数字数据，通过函数运行它，然后将其吐回段落标签中，它会是什么样子？我认为其中大部分功能已完成，但无法完全弄清楚 DIV 文本的拉动。

我看过的一些帖子已经包括一篇关于实时输入的文章，一篇关于计算和显示的文章，还有一些其他的。

解决方案

这个小提琴为我展示了解决方案。它比我以前简单得多。下面给出了一个关于监听器插件的解决方案，看起来不错，但对于我需要的东西来说太过分了。

Answer 1

您可以考虑在此处使用观察者模式。

检查更多。http://canjs.us/#can_observe

Answer 2

要从 div 获取文本，然后将其解析为浮点数，请使用以下命令：

parseFloat(document.getElementById('i1').childNodes[0].nodeValue)

Answer 3

这个小提琴为我展示了解决方案。它比我以前简单得多。下面给出了一个关于监听器插件的解决方案，看起来不错，但对于我需要的东西来说太过分了。

<form id="vcForm">
    <div id="i1">100</div>
    <p></p>
</form>

​</p>

$("#i1").keyup(function() {
    var input1 = parseFloat($("#i1").text(),10);
    var input2 = 100;
    total1 = parseFloat(input1) + parseFloat(input2);
    $("p").text(total1);
}).keyup()​

第一个 DIV 中的值将是动态的（通过滑块更改）。当然，当我在功能上扩展它时，我们会看到实时更新，但对于我最初的问题，这回答了它。