JavaScriptでのボタン処理について

JavaSciptとHTMLでコードを書いています。

HTML
1コード
2<!DOCTYPE html>
3<html lang="ja" dir="ltr">
4  <head>
5    <meta charset="utf-8">
6    <title>TEST</title>
7    <script src="test.js"></script>
8  </head>
9  <body>
10    <form name="test">
11      <input type="button" id="button" value="on" onclick="lgt()">
12    </form>
13  </body>
14</html>

JavaScript
1コード
2function lgt(){
3  var t = document.getElementById('button').defaultValue = "off";
4  if(t==="off"){
5    t="on";
6  }else {
7    t="off";
8  }
9}

このコードの時に、ページをリロードしてからの一度目のボタンクリックではbuttonのvalueがonからoffに変わりますが、二度目以降のクリックではボタンがoffからonに変更されません。

クリックでボタン内の表示をonからoff,offからonと、何度も切り替えができるようにするにはどのようにコードを修正すれば良いですか？

行動規範の内容に同意します

回答1件

ベストアンサー

JavaScript
1var t = document.getElementById('button').defaultValue = "off";

は

JavaScript
1document.getElementById('button').defaultValue = "off";
2var t = "off";

ということなので

ボタンは常にoffになります
tも常にoffです

取得してチェックして入れ直せばいいので

html
1<!DOCTYPE html>
2<html lang="ja" dir="ltr">
3  <head>
4    <meta charset="utf-8">
5    <title>TEST</title>
6  </head>
7  <body>
8    <form name="test">
9      <input type="button" id="button" value="on" onclick="lgt()">
10    </form>
11  </body>
12  <script>
13function lgt(){
14  var t = document.getElementById('button').value;
15  if(t==="off"){
16    t="on";
17  }else {
18    t="off";
19  }
20  document.getElementById('button').value = t;
21}
22  </script>  
23</html>