Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
    <script src="https://rawgit.com/baconjs/bacon.js/master/dist/Bacon.js"></script>
</head>
<body>
  <label>A: <input id="a"></input></label>
  <label>B: <input id="b"></input></label>
  <div>Sum: <span id="sum"></span></div>
  <div>Product: <span id="product"></span></div>
</body>
</html>
 
var a = valueStream($("#a"));
var b = valueStream($("#b"));
a.log("A:");
b.log("B:");
// map the streams to more sensible number values
a.map(str2Number);
b.map(str2Number);
// combine the streams to create sum
var sum = a.combine(b.plus);
// use onValue to show sum
sum.onValue(showSum);    
// combine the streams to create product and show
// it in the correct span
function valueStream(element) {
  return element
    .asEventStream("keyup")
    .map(".currentTarget.value");
}
function str2Number(str) {
  return Number(str);
}
function showSum(result) {
  $("#sum").text(result);
}
Output

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

Dismiss x
public
Bin info
anonymouspro
0viewers