IFE JavaScript Task0002-1 小练习1:处理用户输入
对自己最近做的一些小练习进行总结吧,巩固下记忆;
IFE JavaScript Task0002-1 小练习1:处理用户输入
第一阶段
在页面中,有一个单行输入框,一个按钮,输入框中用来输入用户的兴趣爱好,允许用户用半角逗号来作为不同爱好的分隔。
当点击按钮时,把用户输入的兴趣爱好,按照上面所说的分隔符分开后保存到一个数组,过滤掉空的、重复的爱好,在按钮下方创建一个段落显示处理后的爱好。
思路:创建一个数组保存数据;其中用array.split方法,以(",")为分割号作为数组元素的分割;
去掉数组里重复与空的元素;方法有很多,我这里用的是indexOf方法,先建立一个新数组;然后把这个数组的元素与之前保存用户数据的数组进行对比,如果找不到并且值不为空,那就把此时元素存进新的数组里;进行去重和过滤;
(其实也想过用filter方法,但是显示错误用不了,等以后再完善下)
第二阶段
单行变成多行输入框,一个按钮,输入框中用来输入用户的兴趣爱好,允许用户用换行、空格(全角/半角)、逗号(全角/半角)、顿号、分号来作为不同爱好的分隔。
思路:这个将分隔符号变为正则进行检测就好了;
第三阶段
用户输入的爱好数量不能超过10个,也不能什么都不输入。当发生异常时,在按钮上方显示一段红色的错误提示文字,并且不继续执行后面的行为;当输入正确时,提示文字消失。
同时,当点击按钮时,不再是输出到一个段落,而是每一个爱好输出成为一个checkbox,爱好内容作为checkbox的label。
思路:先在去重前进行判断,超过就显示错误提示;
然后最后对处理好的数据用innerHTML输出;
代码如下:
1 <body> 2 <textarea type="text" class="hobby"cols="45" rows="10"></textarea> <button class="hobby-btn">确定</button> 3 <p style="display: none;color: red" class="error">输入的爱好数量不能超过10个,并且不能为空</p> 4 <form class="textshow"></form> 5 </body> 6 <script> 7 var hobbybtn=document.querySelector(".hobby-btn"); 8 var show=document.querySelector(".textshow"); 9 var erorrtirp=document.querySelector(".error"); 10 hobbybtn.onclick=function(){ 11 var hobbyText=document.querySelector(".hobby").value.trim(); 12 var hobbyArray=hobbyText.split(/\n|\s+|\,|\,|\、|\;|\;/); 13 var resultarr=[];//去重后的数组 14 if(hobbyArray.length>10||hobbyText===""){ 15 erorrtirp.style.display="block"; 16 } 17 else{ 18 erorrtirp.style.display="none"; 19 for(var i=0;i<hobbyArray.length;i++){ 20 if(resultarr.indexOf(hobbyArray[i])===-1&&hobbyArray[i]!==""){ 21 resultarr.push(hobbyArray[i]); 22 } 23 } 24 for(var j=0;j<resultarr.length;j++){ 25 show.innerHTML+= "<label>" + "<input type='checkbox'>" + resultarr[j] + "</label>" 26 } 27 } 28 29 30 31 32 /*function check(item) { 33 34 for(var i=0;i<hobbyArray.length;i++){ 35 if(item!==hobbyArray[i]){ 36 return item 37 } 38 } 39 } 40 41 var newarry=hobbyArray.filter(check(item));*/ 42 43 } 44 45 </script>