JSFiddle - React, Tailwind, and code Playground

by dpnminh

HTML

<input type="number" placeholder="Enter a number" id="number-input">
<button onclick="getNumbers()">
Get numbers
</button>
<div id="number-display" data-content="-1">

</div>

JavaScript

function getNumbers(){
	var number = parseInt(document.getElementById('number-input').value);  
  
  var maxNumber = 2;
  var currPages = [number];
  var index = currPages.indexOf(number);
            
            var middle = Math.floor(1 / 2);
            
            for (var i = 0; i < 2; i++){
                if ((i < middle && currPages[0] - 1 > 0) 
                		|| (i > middle &&  currPages[currPages.length - 1] + 1 > maxNumber)){
                    currPages.unshift(currPages[0] - 1);
                }
                else if ((i < middle && currPages[0] - 1 <= 0) 
                		|| (i > middle &&  currPages[currPages.length - 1] + 1 <= maxNumber)){
                    	currPages.push(currPages[currPages.length - 1 ] + 1);
                    }
                	
            }
  
  var content = document.getElementById('number-display').getAttribute('data-content');
  
  console.log(1 + parseInt(content));
  
  
  document.getElementById('number-display').innerHTML = currPages.toString();
  
  
}