Updating a span when input text changes using DOM API, jQuery, and Backbone
bogotobogo.com site search:
Updating a span when input text changes using DOM API
<html>
<head>
<meta charset="utf-8">
<title>One-way Data Binding</title>
</head>
<body>
Name:<input id="textInput" type="text"/>
<br />
<br />
Hello <span id="nameDiv"></span>!
<script>
var textInputElement = document.getElementById('textInput');
nameDivElement = document.getElementById('nameDiv');
textInputElement.addEventListener('keyup', function(){
var text = textInputElement.value;
nameDivElement.innerHTML = text;
});
</script>
</body>
</html>
bogotobogo.com site search:
Updating a span when input text changes using jQuery
<html>
<head>
<meta charset="utf-8">
<title>One-way Data Binding with jQuery</title>
<script src="//code.jquery.com/jquery-2.0.3.min.js"></script>
</head>
<body>
Name:<input id="textInput" type="text"/>
<br />
<br />
Hello <span id="nameDiv"></span>!
<script>
$('#textInput').on('keyup', function(){
$('#nameDiv').html($('#textInput').val());
});
</script>
</body>
</html>
Updating a span when input text changes using Backbone
<html>
<head>
<meta charset="utf-8">
<title>One-way Data Binding with Backbone</title>
<script src="//code.jquery.com/jquery-2.0.3.min.js"></script>
<script src="//jashkenas.github.io/underscore/underscore-min.js"></script>
<script src="//jashkenas.github.io/backbone/backbone-min.js"></script>
</head>
<body>
Name:<input id="textInput" type="text"/>
<br />
<br />
Hello <span id="nameSpan"></span>!
<script>
// Model
var model = new Backbone.Model({
name: ''
});
// View
model.on('change:name', function(){
$('#nameSpan').html(model.get('name'));
});
// Controller
$('#textInput').on('keyup', function(){
model.set('name', $('#textInput').val());
});
</script>
</body>
</html>
Ph.D. / Golden Gate Ave, San Francisco / Seoul National Univ / Carnegie Mellon / UC Berkeley / DevOps / Deep Learning / Visualization
My YouTube channel