jQuery addClass example

Editor Test

by homura0731

HTML

<button id="prev" type="button">
上一步
</button>
<button id="next" type="button">
下一步
</button>
<br><br>
<textarea id="text" rows="20">
</textarea>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#banner-message {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  font-size: 25px;
  text-align: center;
  transition: all 0.2s;
  margin: 0 auto;
  width: 300px;
}

button {
  background: #0084ff;
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 15px;
  color: #fff;
}

#banner-message.alt {
  background: #0084ff;
  color: #fff;
  margin-top: 40px;
  width: 200px;
}

#banner-message.alt button {
  background: #fff;
  color: #000;
}

JavaScript

// find elements
var text = $("#text")
var prev = $("#prev")
var next = $("#next")
var step = -1;
var stepArray = new Array();


// handle click and add class
text.on("input", ()=>{
 	console.log(text.val());
  stepArray.push(text.val());
  step++;
  //console.log(step++);
})

prev.click(()=>{
	if(step == -1)
  	alert('沒有上一步');
  else{
			step--;
      text.val(stepArray[step]);    	
   }
})
next.click(()=>{
	if(step > stepArray.length-2)
  	alert('沒有下一步');
  else
  {
  	step++;
  	text.val(stepArray[step]);  
  }
		  
})