JavaScript (HTML5): ボタンのクリックと反応

snippet-button

(function(){
	function SnippetButton() {
		this.image = new Image();
		this.image.src = "sample.png";
		document.body.appendChild(this.image);
	};
	SnippetButton.prototype.addButton = function() {
		var button = document.createElement("input");
		button.type = "button";
		button.value = "画像を非表示";
		document.body.appendChild(button);
		
		var that = this;
		button.onclick = function() {
			if (that.image.style.visibility == "hidden") {
				that.image.style.visibility = "visible";
				this.value = "画像を非表示";
			} else {
				that.image.style.visibility = "hidden";
				this.value = "画像を表示";
			}
		}
	};
	function loaded() {
		window.snippet = new SnippetButton();
		window.snippet.addButton();
	};
	if(document.addEventListener){
		document.addEventListener("DOMContentLoaded", loaded, false);
	} else if(/msie/.test(navigator.userAgent.toLowerCase())){
		try {
			document.documentElement.doScroll("left");
		} catch(error){
			setTimeout(arguments.callee, 0);
			return;
		}
		loaded();
	}
}).call(this);