JSFiddle - React, Tailwind, and code Playground

by ozzon91

HTML

<input type="text" placeholder="only numbers" id="inpt"> <button id="insert">insert</button>

<ul id="list">
    
</ul>

JavaScript

var list = document.getElementById('list');
var inpt = document.getElementById('inpt');
var items = list.getElementsByTagName('li');

document.getElementById('insert').addEventListener('click', function(){
    console.log(inpt.value);
	insert(inpt.value);
}, false);

function insert(val) {
    if(!/\d+/.test(val)) {
    	alert('Only numbers');
        return 0;
    }
    
    var ins = false;
    val = parseInt(val);
    
    if(!items.length) {
        setNode(val);
    	return 1;
    }
    
        for(var i=0,l=items.length; i<l;i++) {
            var curVal = parseInt(items[i].textContent);
            console.log(curVal);
            
			if(val < curVal) {
                var li = document.createElement('li');
                li.textContent = val;
            	list.insertBefore(li, items[i]);
                ins = true;
                break;
            } else if(val == curVal) {
            	return 0;
            }
        }
    
        if(!ins) {
            setNode(val);
        }
            
        return 1;
}

function setNode(val) {
	var li = document.createElement('li');
    li.textContent = val;
    list.appendChild(li);
}