<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>8つの数字の計算</title>
<body>
<label for="x1">x1:</label>
<input type="number" id="x1"><br>
<label for="x2">x2:</label>
<input type="number" id="x2"><br>
<label for="x3">x3:</label>
<input type="number" id="x3"><br>
<label for="x4">x4:</label>
<input type="number" id="x4"><br>
<label for="y1">y1:</label>
<input type="number" id="y1"><br>
<label for="y2">y2:</label>
<input type="number" id="y2"><br>
<label for="y3">y3:</label>
<input type="number" id="y3"><br>
<label for="y4">y4:</label>
<input type="number" id="y4"><br>
<button onclick="calculate()">計算</button>
<p id="answer"></p>
<p id="count"></p>
<script>
var count = 0;
function calculate() {
count++;
var x1 = document.getElementById("x1").value;
var x2 = document.getElementById("x2").value;
var x3 = document.getElementById("x3").value;
var x4 = document.getElementById("x4").value;
var y1 = document.getElementById("y1").value;
var y2 = document.getElementById("y2").value;
var y3 = document.getElementById("y3").value;
var y4 = document.getElementById("y4").value;
var ans = "";
ans += direction(Number(x1) - Number(x2)) + (Number(x1) - Number(x2)) / 2 + "<br>";
ans += direction(Number(x3) - Number(x4)) + (Number(x3) - Number(x4)) / 2 + "<br>";
ans += direction(Number(y1) - Number(y2)) + (Number(y1) - Number(y2)) / 2 + "<br>";
ans += direction(Number(y3) - Number(y4)) + (Number(y3) - Number(y4)) / 2 + "<br>";
document.getElementById("answer").innerHTML = ans;
document.getElementById("count").innerHTML = "計算ボタンを" + count + "回押しました。";
}
function direction(num) {
var dir = "";
if (num == 0) {
dir = "そのまま";
} else if (num > 0) {
dir = "右に";
} else {
dir = "左に";
}
return dir;
}
</script>
</body>
</html>
