一，前言

有一个需求，因为我们拿到的js是没有下一题和上一题的功能的，所以需要在分析代码后，修改其js文件，让其实现其功能。而且要解决，延迟自动到下一题和误触摸多次跳转bug。

二，建立空的div

我们需要先在循坏的最外层。定义一个 var shangyiti=1；然后我们利用循环的方法不断递增变量，达到不同的div有着不同的id名以及class的效果。传入题目标题：

var shangyiti1="shangyiti"
var divp1235 = document.createElement("button");
divp1235.setAttribute("id", shangyiti1+shangyiti);
divp1235.className = "entrance-bottom-frame-line-titlep21345";
// 传入题目标题
//div2.innerHTML = data1[i].choice;
document.querySelectorAll(".entrance-bottom-frame-line")[i].appendChild(divp1235);
shangyiti++;

这样的话我们就会发现，检查的时候，每次追加的时候他的id都是不同的每次递增1。 shangyiti1，shangyiti2，shangyiti3，shangyiti4，shangyiti5.。。。。。

在成功完成建立空的按钮后，我们可以在适合的位置，填入我们想要的东西，如下document.getElementById(shangyiti1+shangyiti).innerHTML = "上一题";

三，css样式设置

我们发现，这个上一题的按钮有一个共同的class。我们在html文件里写下基本的美化样式。与控制字体大小的样式。在这里插入图片描述

我们完成了这些操作以后，看我们的效果图：在这里插入图片描述基本的样式有了，下一步就是获取点击事件，执行操作。

四，点击事件操作。

我们观察代码发现：这个答题页面像是一个大的页面，每次选完滚动一个页面，模拟滑动的功能。现在我们已按钮来控制滑动效果。

document.getElementById('xiayiti1').addEventListener('tap', function() {

因为一个有五个，我们去前四个下一题的按钮id，只需要写4个按钮点击方法即可。方法里内容为，每次滑动100，删掉旧题目，显示新题目。在这里插入图片描述如上图所示。显示新的题目。老的题目删除掉。

五，上一题同理/提交按钮

上一题按钮和下一题按钮同理。逻辑：我们都知道，最后一题是不需要设置下一题的，我们完全可以把第5的按钮设置为提交按钮。我们写一个if语句判断一下：

	document.querySelectorAll(".entrance-bottom-frame-line")[i].appendChild(divp123);
			if(xiayiti<5){
			document.getElementById(xiayiti1+xiayiti).innerHTML = "下一题";
			}
			if(xiayiti==5)
			{
				document.getElementById(xiayiti1+xiayiti).innerHTML = "提交";
			}

这样就成功的吧第五个按钮变成了提交按钮。

在这里插入图片描述将之前的积分计算方法集成到提交按钮点击事件触发。成功计算出本次测试分值与openwindow方法，返回首页面，继续执行其他操作。

五，最后

这次按钮原理和之前隐藏域的用法基本一样。还是要多使用循环体，直接手动遍历代码量及其庞大，不太合适。