Change HTML Button Based On Cookie Existance

HTML

<button id="read_button" onclick="createCookie('user_read_the_page', 30)"></button>

JavaScript

document.addEventListener("DOMContentLoaded", function(event) { 
  changeButton();
  
  // Use this for tests...
  deleteCookie('user_read_the_page');    
});

function deleteCookie( name ) {
  document.cookie = name + '=; expires=Thu, 01 Jan 1970 00:00:01 GMT;';
}

function createCookie(name, days)
{
	var expire = new Date ();
	expire.setTime (expire.getTime() + (24 * 60 * 60 * 1000) * days); 
	document.cookie = name + "=1; expires=" + expire.toGMTString();
	changeButton();
}

function changeButton()
{

	var name = 'user_read_the_page' + '=';
	var ca = document.cookie.split(';');
	for(var i=0; i<ca.length; i++)
	{
		var c = ca[i];

		while(c.charAt(0)==' ')
		{
			c = c.substring(1);
		}

		if(c.indexOf(name) != -1)
		{
			var output = c.substring(name.length,c.length);
		}
	}       

	if(output == 1)
	{
		cookie_exists = 1;
	}
	else
	{
		cookie_exists = 0;
	}           

	if(cookie_exists == 1)
	{
		document.getElementById("read_button").style.backgroundColor = "green";
		document.getElementById("read_button").style.color = "white";
		document.getElementById("read_button").style.fontWeight = "bold";
		document.getElementById("read_button").innerText = "\u2714 You Have Read This Page";
	}
	else
	{
		document.getElementById("read_button").style.backgroundColor = "red";
		document.getElementById("read_button").style.color = "white";
		document.getElementById("read_button").style.fontWeight = "bold";
		document.getElementById("read_button").innerText = "\u2718 Please Read This Page";              
	}

	return "";
}