Skip to content

Instantly share code, notes, and snippets.

@freakflames29
Created March 27, 2021 16:21
Show Gist options
  • Save freakflames29/0971e50f96fee027163faea8f88ac503 to your computer and use it in GitHub Desktop.
Save freakflames29/0971e50f96fee027163faea8f88ac503 to your computer and use it in GitHub Desktop.
Two way data binding in vanilla js
// the html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Two way data binding</title>
</head>
<body>
<h1 id='pr'>Hello</h1>
<input type="text" id="two">
<script src="app.js" charset="utf-8"></script>
</body>
</html>
// the app.js
const inp=document.getElementById('two')
const h1=document.getElementById('pr')
eve();
function eve()
{
inp.addEventListener('keyup',cm)
}
function cm(e)
{
h1.innerText=e.target.value
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment