Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
<!--[if IE]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
  article, aside, figure, footer, header, hgroup, 
  menu, nav, section { display: block; }
</style>
  <script type="text/javascript" src="http://github.com/downloads/SteveSanderson/knockout/knockout-2.0.0.js"></script>
  
  <script type="text/javascript">
    //<![CDATA[
    var viewModel = {
      "Data1": ko.observable(1),
      "Data2": ko.observable(2),
      "Data3": ko.observable(3),
      "Data4": ko.observable(4),
      "Data5": ko.observable(5),
      "Data6": ko.observable(6)
    }
    viewModel.Total = ko.computed(function() {
        return parseInt(this.Data1()) + parseInt(this.Data2()) + parseInt(this.Data3()) + parseInt(this.Data4()) + parseInt(this.Data5()) + parseInt(this.Data6());
    }, viewModel);
    //]]>
  </script>
</head>
<body>
  <input type="text" data-bind="value: Data1, valueUpdate: 'afterkeydown'" />
  <br />
  <input type="text" data-bind="value: Data2, valueUpdate: 'afterkeydown'" />
  <br />
  <input type="text" data-bind="value: Data3, valueUpdate: 'afterkeydown'" />
  <br />
  <input type="text" data-bind="value: Data4, valueUpdate: 'afterkeydown'" />
  <br />
  <input type="text" data-bind="value: Data5, valueUpdate: 'afterkeydown'" />
  <br />
  <input type="text" data-bind="value: Data6, valueUpdate: 'afterkeydown'" />
  <br />
  <span data-bind="text: Total"></span>
  <script type="text/javascript">
    //<![CDATA[
    ko.applyBindings(viewModel);
    //]]>
  </script>
</body>
</html>
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers