//htmlがロードされたらjs開始
document.addEventListener("DOMContentLoaded", () => {
    //htmlからheadタグを取得する
    var head = document.querySelector("head");
    //newcss変数を作る
    var newcss;
    //cssbtn変数にcssというidを持ってきて代入する
    let cssbtn = document.getElementById("css");
    //cssbtn変数のなかのcssIDがクリックされた時
    cssbtn.addEventListener("click", (e) => {
    //もしnewcss変数がunlbtn変数によって消されていた時、元に戻る    
	if (newcss) return;
    //newcss変数にlinkタグを新しく生成する
	newcss = document.createElement("link");
    //newcss変数に作ったlinkのrel属性をstyledheetにする
	newcss.rel = "stylesheet";
	// ※newcss.title = "あとから版";	// title属性入れると代替CSSに
    //newcss変数の中のlinkをnew.cssにする
	newcss.href = "new.css";
    //head変数の中に入っているhead要素（親）のなかにnewcss変数に入っているlink要素を追加する
	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;
	}
    });
    //jsbtn変数にjsIDを代入する
    let jsbtn = document.getElementById("js");
    //jsbtnのなかのjsIDがクリックされた時
    jsbtn.addEventListener("click", (e) => {
    //newjsという変数にscript要素を生成する
	let newjs = document.createElement("script");
    //newjs変数の中のscript要素のtypeをじjavascriptに設定する
	newjs.type = "text/javascript";
    //newjs変数の中のJavaScriptのsrcをnew.jsに設定する
	newjs.src  = "new.js";
    //newjs変数の文字コードをUTF-8にする
	newjs.charset  = "UTF-8";
    //head要素にnewjs変数に入っているJavaScriptのsrcを入れる
	head.appendChild(newjs);	// script要素を追加
    });
});