//htmlがロードされたらjs開始
document.addEventListener("DOMContentLoaded", () => {
    //htmlからheadタグを取得する
    var head = document.querySelector("head");
    var newcss;
    //cssbtn変数にcssというidを持ってきて代入する
    let cssbtn1 = document.getElementById("css1");
    let cssbtn2 = document.getElementById("css2");
    let cssbtn3 = document.getElementById("css3");
    cssbtn1.addEventListener("click", (e) => {  
	if (newcss) return;
    //newcss変数にlinkタグを新しく生成する
	newcss = document.createElement("link");
    //newcss変数に作ったlinkのrel属性をstyledheetにする
	newcss.rel = "stylesheet";
	// ※newcss.title = "あとから版";	// title属性入れると代替CSSに
	newcss.href = "new1.css";
	head.appendChild(newcss);	// link要素を追加
    });
    cssbtn2.addEventListener("click", (e) => {  
        if (newcss) return;
        newcss = document.createElement("link");
        newcss.rel = "stylesheet";
        newcss.href = "new2.css";
        head.appendChild(newcss);	// link要素を追加
        });
        cssbtn3.addEventListener("click", (e) => {  
            if (newcss) return;
            newcss = document.createElement("link");
            newcss.rel = "stylesheet";
            // ※newcss.title = "あとから版";	// title属性入れると代替CSSに
            newcss.href = "new3.css";
            head.appendChild(newcss);	// link要素を追加
            });
                //unlbtn変数にunlというidをhtmlから持ってきて代入する
    let unlbtn = document.getElementById("unl");
    //unlbtn変数の中のunlIDがクリックされた時
    unlbtn.addEventListener("click", (e) => {
    //もし現在newcss変数の動きが適応されていた時、newcss変数を取り外してnewcss変数を無かったことにする
	if (newcss) {
	    newcss.remove();
	    newcss = null;
	}
    });
});