※ ChatGPTを利用し、要約された質問です（原文：ボタン押しで表示した文字を１文字だけ自動で戻す方法）
ボタン押しで１文字だけ戻す方法 | JavaScript
このQ&Aのポイント
JavaScriptを使用して、ボタンを押すと表示される文字を１文字ずつ自動で戻す方法について解説します。
if文の条件によって、一致した場合には次の文字を表示し、一致しなかった場合には間違った箇所からやり直す処理を行います。
さらに、一致させる文字を円周率などに変更することも可能です。ブラウザ上に一致、不一致の入力値を表示させながら、要件に応じた処理を行うことができます。
ボタン押しで表示した文字を１文字だけ自動で戻す方法
下記コードのif文のところでelseになった場合に、
一致しているところまで残して途中からやり直す場合は
どのようにすればいいでしょうか。
・一致、不一致のいずれも入力値をブラウザ上に表示させる
・不一致のとき、全てリセットさせずに、間違った箇所からやり直させる。
・一致させる文字が円周率に変更してもできる
といったことを可能にしたいです。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<script language="JavaScript">
<!--
var i = 1;
var stMihon;
function stLoad(){
document.getElementById("anser").innerHTML = "";
}
function st(n){
stMihon = "1357924680".substr(i-1,1);
document.getElementById("anser").innerHTML += n;
if(n==stMihon){
i++;
}else{
alert("正しい数字を入力してください。\nでは、続きから");
document.getElementById("anser").innerHTML.substr(0,i-1);
return; //このreturnは不要？？
}
}
//-->
</script>
<style type="text/css">
p{width:330px; padding:5px; background-color:#ddd;}
#anser{color:#f00;padding:10px;width:330px;}
table{border:1px solid #000;background-color:#eee;width:200px;height:220px;margin-left:60px;}
td{border:1px solid #000;font-size:20px;text-align:center;}
</style>
</head>
<body onload="stLoad()">
<p>下記ボタンを押して1357924680と<br>入力して下さい。</p>
<div id="anser"></div>
<table>
<tr>
<td onClick="st(1)">1</td>
<td onClick="st(2)">2</td>
<td onClick="st(3)">3</td>
</tr>
<tr>
<td onClick="st(4)">4</td>
<td onClick="st(5)">5</td>
<td onClick="st(6)">6</td>
</tr>
<tr>
<td onClick="st(7)">7</td>
<td onClick="st(8)">8</td>
<td onClick="st(9)">9</td>
</tr>
<tr>
<td colspan="2" onClick="st(0)">0</td>
<td id="en" onClick="st('.')">.</td>
</tr>
</table>
</body>
</html>
