JS小Demo实战之通过获取文本框的输入值来改变div的类型
最近开始学习angular.js，课程里有一个demo很好玩，我就想试着用原生js写一下。
这个demo大致是这样的，有一个文本输入框，文本框下面是一个div，
你可以在文本框里输入标签的单词，然后通过外联的foundation.css文件就可以把这个div改变成标签的样子。
就变成了
或者
而且在输入的时候，下面的div还会实时的改变文字
。
这个demo用angular.js实现起来很简单，但是我发现用原生js实现起来却不是那么容易的事情。
一开始我以为无非就是可以用getElementById获取到input和div，然后在获取到input的value，把这个value值赋值给div的class作文class的名称，再改变div的innerHTML值就大功告成。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<link rel="stylesheet" href="css/foundation.min.css"/>
<title></title>
</head>
<body style="padding:10px;">
<input id="input1" type="text" />
<div id="div1">我是一个</div>
</body>
<script type="text/javascript">
window.onload=function(){
var oDiv=document.getElementById('div1');
var oInput=document.getElementById('input1');
var leibie="";
leibie=oInput.value;
oDiv.setAttribute("class",leibie);
oDiv.innerHTML="我是一个"+leibie;
}
</script>
</html>
但是我发现网页在我输入文本框之后并没有什么变化，没报任何错，div的内容也没变，也只是有class，但是没有class的名称。
接着我用console.log(leibie)和console.log(oInput,value)调试发现leibie和oInput,value都是空字符串，接着在百度里查找也没什么头绪，直到在技术交流群里的一位大神点醒了我，
因为我在页面加载的时候就已经获取到了input这个文本框的对象，那时的leibie和oInput,value都是空，所以输入的值对于oInput,value根本没有改变。
所以我就把js改成了
window.onload=function(){
var oDiv=document.getElementById('div1');
var leibie="";
setTimeout(function(){
leibie=document.getElementById('input1').value;
},4000);
setTimeout(function(){
oDiv.setAttribute("class",leibie);
},5000);
setTimeout(function(){
oDiv.innerHTML="我是一个"+leibie;
},5000);
}
感觉很笨拙，但是初步能实现demo 的效果，只是，必须在4秒内把想要的标签输入到input里，这个设计看起来很反人类。。。。
于是我就想到，可不可以加一个button来作为这个时间节点呢，然后给button加一个点击事件，
在点击事件里再获取oInput的value，再去改变div的class和innerHTML。
代码也就变成了这样。
window.onload=function(){
var oDiv=document.getElementById('div1');
var leibie="";
var btn=document.getElementsByTagName('button')[0];
btn.onclick=function(){
leibie=document.getElementById('input1').value;
oDiv.setAttribute("class",leibie);
oDiv.innerHTML="我是一个"+leibie;
}
}
页面也就变成了
和这样
相比于刚才的效果 这个会好一点 但是和最初的demo的效果差距还是有的。
直到偶然间看到技术群里讨论给input绑定change事件，只要文本框的内容改变，就可以触发事件，我就又把代码小小的改进了下。
window.onload=function(){
var oDiv=document.getElementById('div1');
var leibie="";
$("#input1").change(function(){
leibie=document.getElementById('input1').value;
oDiv.setAttribute("class",leibie);
oDiv.innerHTML="我是一个"+leibie;
});
}
这样的话，只要我在文本框里输入了值，就可以触发改变div的class和innerHTML的事件。
也可以做到demo的样子了，不过还有个很大的问题就是，change事件必需要失去焦点时候才能触发，也就是说div的innerHTML不会实时的改变，如果焦点还在input里，就会出现下面的状况。箭头指向的就是焦点还在input里。
写这个小demo还是花了挺长的时间，因为对获取对象时机的不了解，百度到的也收获甚少，但是写到最后还是对于对象value有了一个新的认识。
如何改进，我想了很久还是没有想出来，如果哪位大神可以帮助我继续改进这个demo，可以在下面给我留言，在下感激不尽。
从刚开始自学前端到现在也差不多有大半年的时间了，看似很简单的一个demo，但是自己实现起来还是漏洞百出，不得不说Javascript确实是门值得深入学习的语言，在前端的路上任重而道远，希望自己的技术可以越来越成熟。