javascript
IFE JavaScript Task0002-1 小练习1：处理用户输入
對自己最近做的一些小練習進行總結(jié)吧，鞏固下記憶；
IFE JavaScript Task0002-1 小練習1：處理用戶輸入
第一階段
在頁面中，有一個單行輸入框，一個按鈕，輸入框中用來輸入用戶的興趣愛好，允許用戶用半角逗號來作為不同愛好的分隔。
當點擊按鈕時，把用戶輸入的興趣愛好，按照上面所說的分隔符分開后保存到一個數(shù)組，過濾掉空的、重復的愛好，在按鈕下方創(chuàng)建一個段落顯示處理后的愛好。
思路：創(chuàng)建一個數(shù)組保存數(shù)據(jù)；其中用array.split方法，以(",")為分割號作為數(shù)組元素的分割；
去掉數(shù)組里重復與空的元素；方法有很多，我這里用的是indexOf方法，先建立一個新數(shù)組；然后把這個數(shù)組的元素與之前保存用戶數(shù)據(jù)的數(shù)組進行對比，如果找不到并且值不為空，那就把此時元素存進新的數(shù)組里；進行去重和過濾；
（其實也想過用filter方法，但是顯示錯誤用不了，等以后再完善下）
第二階段
單行變成多行輸入框，一個按鈕，輸入框中用來輸入用戶的興趣愛好，允許用戶用換行、空格（全角/半角）、逗號（全角/半角）、頓號、分號來作為不同愛好的分隔。
思路：這個將分隔符號變?yōu)檎齽t進行檢測就好了；
第三階段
用戶輸入的愛好數(shù)量不能超過10個，也不能什么都不輸入。當發(fā)生異常時，在按鈕上方顯示一段紅色的錯誤提示文字，并且不繼續(xù)執(zhí)行后面的行為；當輸入正確時，提示文字消失。
同時，當點擊按鈕時，不再是輸出到一個段落，而是每一個愛好輸出成為一個checkbox，愛好內(nèi)容作為checkbox的label。
思路：先在去重前進行判斷，超過就顯示錯誤提示；
然后最后對處理好的數(shù)據(jù)用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">輸入的愛好數(shù)量不能超過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.οnclick=function(){ 11 var hobbyText=document.querySelector(".hobby").value.trim(); 12 var hobbyArray=hobbyText.split(/\n|\s+|\,|\，|\、|\;|\；/); 13 var resultarr=[];//去重后的數(shù)組 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>?
轉(zhuǎn)載于:https://www.cnblogs.com/spezz07/p/5819954.html
總結(jié)
以上是生活随笔為你收集整理的IFE JavaScript Task0002-1 小练习1：处理用户输入的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： SQL基础篇---函数及其函数配套使用的
- 下一篇： gradle idea java ssm