function clickSelector(e, parentID) {
	document.getElementById(parentID).querySelectorAll('.button').forEach(item => {
		item.style ="";
		item.active ="false";
	})
	event.target.style = "background: #4CAF50;"
	event.target.active = "true"

}

export function getButton(parentID) {
	document.getElementById(parentID).querySelectorAll('.button').forEach(item => {
		if (item.active === "true") {
			return item.no
		}
	})
}

export function create(parentID, spriteSheet, ranges, style = "") {
const buttonBar = document.getElementById(parentID);

for(let i=0;i < ranges[1]-ranges[0];i++) {
let span = document.createElement('span')
	span.className = `button ${style}`
	const n = i + ranges[0]
	span.appendChild(spriteSheet[n]);
	buttonBar.appendChild(span);
	span.no = i;
	span.addEventListener('click', e => {
			clickSelector(e, parentID);
		});
};
};

export function destroy(parentID) {
	const buttonBar = document.getElementById(parentID);
	while (buttonBar.lastChild) {
		buttonBar.removeChild(buttonBar.lastChild)
	}
}