ボタンの表示と戻り値

Question

javascript(ブックマーク内)で簡単な文字当てゲームを作ろうと考えています。
そこで、表示部分を書こうとした際、以下のコードで行き詰まってしまいました。

やりたいこととしては、
・sentaku()を実行した際、戻り値でボタンの番号(a1からa4)が帰ってくる
・sentaku()を実行した際、ボタンが表示され、ボタンが押された後は消える。

の二つです。
ボタンが消えないことと、returnをどこで使えばいいのかで行き詰まっています。

function syokika() {
	var d = document.createElement("div");
	d.style.display = "block";
	d.style.height = "700px";
	d.style.width = "1100px";
	d.style.background = "#000";
	d.innerHTML = ' < span class = "a a1" > < span id = bt1 class = b > 1 <
		/span></span > < span class = "a a2" > < span id = bt2 class = b > 2 <
		/span></span >
		< span class = "a a3" > < span id = bt3 class = b > 3 < /span></span > < span class =
		"a a4" > < span id = bt4 class = b > 4 < /span></span >

		< span style =
		"position:absolute;height:200px;top:400px;left:5%;width:90%;background-color:#fff;overflow-y:scroll;"
	id = "next" >
		< /span> < style >
		.a1 {
			top: 100 px;
			left: 5 % ;
		}
		.a2 {
			top: 100 px;
			left: 55 % ;
		}
		.a3 {
			top: 250 px;
			left: 25 % ;
		}
		.a4 {
			top: 250 px;
			left: 75 % ;
		}

	div.a {
			border: 1.5 px solid #00ff00;
height:50px;
width:20%;
position:absolute;
color:# fff;
			font - size: 30 px;
			text - align: center;
			letter - spacing: 0.5e m;
			display: block;
		}
		.b {
			display: block;
			margin: 10 px 0;
		} < /style>
	';
	document.querySelector("body").appendChild(d);
	var e = document.getElementsByClassName("a");
	for (var i = 0; i < e.length; i++) {
		e[i].style.display = "none";
	}

}
var e = document.getElementsByClassName("a");

function hide() {
	for (var i = 0; i < e.length; i++) {
		e[i].style.display = "none";
	}
}

elemeve = true;

function sentaku(a, b, c, d) {
	if (!typeof a == "undefined" || !typeof a == "number") {
		document.getElementById("bt1").innerHTML = a;
	}
	if (!typeof b == "undefined" || !typeof b == "number") {
		document.getElementById("bt2").inn1erHTML = b;
	}
	if (!typeof c == "undefined" || !typeof c == "number") {
		document.getElementById("bt3").innerHTML = c;
	}
	if (!typeof d == "undefined" || !typeof d == "number") {
		document.getElementById("bt4").innerHTML = d;
	}
	var e = document.getElementsByClassName("a");
	for (var i = 0; i < e.length; i++) {
		e[i].style.display = "block";
	}
	if (elemeve === true) {
		elemeve = false;
		var a1 = document.getElementById("a1");
		var a2 = document.getElementById("a2");
		var a3 = document.getElementById("a3");
		var a4 = document.getElementById("a4");
		a1.addEventListener("click", function() {
			hide();
		});
		a2.addEventListener("click", function() {
			hide();
		});
		a3.addEventListener("click", function() {
			hide();
		});
		a4.addEventListener("click", function() {
			hide();
		});
	}
}


syokika();

どうしてもこれらの処理をブックマーク内(1スクリプト内)で完結したいです。
ご回答のほど、よろしくお願いします。

Comments

[int32_t]

コードにきちんとインデントを付けてください。読みにくいです。

> ・sentaku()を実行した際、戻り値でボタンの番号(a1からa4)が帰ってくる

4つのうち、どのボタンの番号が返ってほしいのですか?

[退会済みユーザー]

押したボタンの番号です。
ご指摘ありがとうございます。

Answer 1

var a1 = document.getElementById("a1");
var a2 = document.getElementById("a2");
var a3 = document.getElementById("a3");
var a4 = document.getElementById("a4");
a1.addEventListener("click", function(){
hide();
});
a2.addEventListener("click", function(){
hide();
});
a3.addEventListener("click", function(){
hide();
});
a4.addEventListener("click", function(){
hide();
});

a1 〜 a4 という id を持った要素がないので、addEventListener() は実行できていないはずです。

const buttons = document.querySelectorAll("a");
for (let a of buttons) {
  a.addEventListener("click", event => {
    hide();
    関数(buttons.indexOf(event.currentTarget));
  });
}

これで、関数() に0から3のボタン番号が渡ります。

---

・sentaku()を実行した際、戻り値でボタンの番号(a1からa4)が帰ってくる

ボタンのクリックはユーザが起こすものなので、sentaku() の戻り値として返すのは難しいです。Promise/async/await でそれっぽく作ることはできますが、初学者には早すぎます。上記のコードのように結果が欲しい処理を click イベントリスナから呼び出しましょう。