落ちゲーアプリ作成４

前回、複数の忍者を落としてクリックして消すところまで行っていたが、

今回は忍者をクリックしてカウントすること、時間になるとページ遷移することを記述した。

const point = document.getElementById("point");

let clickCount = 0

const ninja1 = document.getElementById("ninja_1");

ninja1.addEventListener("click",() => {

ninja1.remove(),clickCount += 1;

point.innerHTML = `合計${clickCount}点`;

});

const ninja2 = document.getElementById("ninja_2");

ninja2.addEventListener("click",() => {

ninja2.remove(),clickCount += 1;

point.innerHTML = `合計${clickCount}点`;

});

setTimeout(function(){

window.location.href = '/results';

}, 4*1000);

html.erb に記述した合計0点（id:point) に対して innerHTML によってクリックした分だけ点数を加えていく仕組みを作ることと、

setTimeout にて時間でページ遷移する仕組みを導入した。

しかし、 http メソッドは get となるため clickCount した点数のデータ送信方法として xhr 通信の利用を考えた。

上記の下に

point.addEventListener("click", (e) => {

e.preventDefault();

const XHR = new XMLHttpRequest();

XHR.open("POST", "/games", false);

XHR.send(clickCount);

console.log(clickCount)

});

を記述したが、 xhr 通信では、同期通信に注意文言が出てしまいページ遷移不可能。

下記の部分だけ変更してみると、

XHR.open("POST", "/games", true);

 create アクションまでは動いているので、

redirect_to action: :create してみたが、get で動いているためビューの遷移がなし、それでは、別の index 画面を用意し、そこに飛ぶように results controller で

redirect_to results_path を記述してみたが、遷移せず。

やはり非同期通信だから遷移しないのだろうか。

xhr 通信を諦めて、別の方法を検討する。