Simulate Angular Binding with Pure Javascript

Asked

Viewed 55 times

0

You can simulate Angular data Binding in pure javascript?

Example:

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>

<div ng-app="">
 
<p>Input something in the input box:</p>
<p>Name : <input type="text" ng-model="name" placeholder="Enter name here"></p>
<h1>Hello {{name}}</h1>

</div>

</body>
</html>

Code taken from W3schools

javascript html

1 answer

1

Just with pure JS would be something like:

<!DOCTYPE html>
    <html>
        <body>

            <div>
                <p>Input something in the input box:</p>
                <p>Name : <input type="text" id="inputNome" placeholder="Enter name here" onChange="mudouInput()"></p>
                <h1 id="nome">Hello </h1>

            </div>

            <script type="text/javascript">
            	function mudouInput() {
            		inputValue = document.getElementById('inputNome').value;
    		        document.getElementById('nome').innerHTML = "Hello " + inputValue;
        	    }
            </script>
        </body>
    </html>

  • 2

    I suggest switching on onChage for onKeyUp for this purpose to be the same as in the example

Browser other questions tagged javascript html

You are not signed in. Login or sign up in order to post.