JavaScript Vanilla Two Way Binding

Question

I have found this very short yet handy two way binding code written in pure JavaScript. The data binding works fine, but what I want is to take the value from the first input and multiply it by a desired number and bind the outcome to the next input. I will appreciate any kind of help. This is my HTML Code:

<input class="age" type="number">
<input class="age" type="number">

and the JavaScript Code:

    var $scope = {};
(function () {
    var bindClasses = ["age"];
    var attachEvent = function (classNames) {
        classNames.forEach(function (className) {
            var elements = document.getElementsByClassName(className);
            for (var index in elements) {
                elements[index].onkeyup = function () {
                    for (var index in elements) {
                        elements[index].value = this.value;
                    }
                }
            }
            Object.defineProperty($scope, className, {
                set: function (newValue) {
                    for (var index in elements) {
                        elements[index].value = newValue;
                    }
                }
            });
        });
    };
    attachEvent(bindClasses);
})();

All what this does is it reflects the exact same thing written in the first input, but I want to alter the outcome by multiplying the number. — Ahmad Karimi
– Ahmad Karimi, Commented Jun 30, 2018 at 6:58
multiplying the number by what? The number entered in the second text-box? — Nick Parsons
– Nick Parsons, Commented Jun 30, 2018 at 7:05
I want to take the number in the first input box, then multiply it by a desired number (eg. 2) and then send the result to the second input box. — Ahmad Karimi
– Ahmad Karimi, Commented Jun 30, 2018 at 7:09

Stev Ngo · Accepted Answer · 2018-06-30 07:54:18Z

0

If the desired results is take first input value, do something with it, put it to second input then why so serious?

(function () {
  var bindClasses = ["age"];
  var attachEvent = function (classNames) {
    classNames.forEach( function( className ) {
      var els = document.getElementsByClassName( className ),
          from, to;
      if ( 2 > els.length ) {
        return;
      }
      from = els[0];
      to   = els[els.length - 1];

      from.addEventListener( 'keyup', function() {
        var v = this.value;
        // Do whatever you want with that value
        // Then assign it to last el
        if ( isNaN( v ) ) {
          return;
        }
        v = v / 2;
        to.value = v;
      });
    });
  };
  attachEvent(bindClasses);
})();

answered Jun 30, 2018 at 7:54

Stev Ngo

944 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Millard · Accepted Answer · 2018-10-23 17:21:02Z

0

Another simple approach to two-way binding in JS could be something like this:

<!-- index.html -->
<form action="#" onsubmit="vm.onSubmit(event, this)">
    <input onchange="vm.username=this.value" type="text" id="Username">
    <input type="submit" id="Submit">
</form>
<script src="vm.js"></script>

// vm.js - vanialla JS
let vm = {
    _username: "",
    get username() {
        return this._username;
    },
    set username(value) {
        this._username = value;
    },
    onSubmit: function (event, element) {
        console.log(this.username);
    }
}

JS Getters and Setters are quite nice for this - especially when you look at the browser support for this.

answered Oct 23, 2018 at 17:21

Millard

4566 silver badges12 bronze badges

Collectives™ on Stack Overflow

JavaScript Vanilla Two Way Binding

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related