练习JS时引发的思考：代码顺序是多么重要

博主现在是一名大一学生。对Web前端有着浓厚的兴趣，所以一直在自学中。

昨天晚上，博主用JS制作简单的图片切换实例。

需求

1.点击“下一张”按钮按顺序切换一张图片。

2.当达到最后一张图片的时候继续点击“下一张”按钮，停留在最后一张图片不动。

3.点击“上一张”反之亦然。

为了练习简单，所以没有使用数组来做这个效果，而是直接给图片命名简单的名字，用JS替换名字的方法来切换图片。

 

当代码都写完之后，却发切换的顺序出错了。一共三张图片但切换顺序不正确。

 

无论博主怎么检查都没有发现语法错误。但是if条件判断这边就是怎么改都不对，按道理if（n>3){n=3；}这个判断是没问题的，但是无论怎么弄都一直是错误的顺序。

用console.log(n);来检查更是搞不懂。。。点击“上一张” 竟然是2，1，0的顺序。点击“下一张” 竟然显示两次2。。。

这就搞不懂了，越想越郁闷。当时已经是半夜12点。打算第二天早上起来搞。

 

今天早上，起来之后又检查了一遍。结果发现是代码顺序的问题。。。

博主把赋值的代码写在了if判断语句的上面了。。

然后博主将代码改了一下顺序，结案。

 

亏我这一晚上辗转反侧，结果竟然是这样的低级错误导致的。

这种错误对一些中高级的前端程序员来说可能不算什么，但是对我们这种低级的来说也是需要慎重的因素。

写此博文只是为了提醒和我一样还在学习的前端们避免这种低级错误。少走错路弯路。

“不动笔墨不读书”，同样在前端行业也是同样的道理。无代码，不前端。只有在不断练习当中，才能不断的发现问题，解决问题，并成长。

 

以下是博主的源代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>布局之后的图片切换</title>
		<style>
	        #box{
            	width: 650px;
            	height: 365px;
            	background-image: url(img/1.jpg);               
            }
			.btn{
				width: 100px;
				height: 100px;								
			}
			#prev{		
				background-image: url(img/prev.png);
				float: left;
				margin: 132px 0px;
				
			}
			#next{			
				background-image: url(img/next.png);
				float: right;
				margin: 132px 0px;
			}		
		</style>
		<script>
			window.onload=function(){
				/*
				 * 1.拿到按钮与DIV
				 * 2.给按钮添加点击事件
				 *        1.定义N
				 *        2.替换div.background-img的图片名称
				 *   
				 */
				var prev=document.getElementById('prev');
				var next=document.getElementById('next');
				var box=document.getElementById('box');
				var n=1;
				
				
				//下一张点击事件
				next.onclick=function(){
					n++;
																	
					if(n>3){
						n=3;						
					}	
					box.style.backgroundImage='url(img/'+n+'.jpg)'					
				};
			
			    //上一张点击事件
				prev.onclick=function(){
					n--;
										
					if(n<1){
						n=1;
					}
					box.style.backgroundImage='url(img/'+n+'.jpg)'					
				};						
			};		
		</script>		
	</head>
	<body>
		<div id="box">
		<input type="button" id="prev" class="btn" value="上一张" />
		<input type="button" id="next" class="btn" value="下一张" />
		</div>
		
	</body>
</html>

　　

 

posted @ 2017-03-06 09:56  MJwilson  阅读(134)  评论(0)    收藏  举报