JavaScriptのボタン切り替え

JavaScriptでボタンのVALUEをon->offに切り替える機能を作成しました。

php
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;
4  if(t==="off"){
5    t="on";
6    document.getElementById('button').defaultValue = t;
7  }else if(t==="on") {
8    t="off";
9    document.getElementById('button').defaultValue = t;
10  }
11}

上記のコードではうまく切り替わるのですが、

php
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    <?php $x="Hello"; ?>
11    <form name="test">
12      <input type="button" id="<?php echo $x; ?>" value="on" onclick="lgt()">
13
14    </form>
15  </body>
16</html>

JavaScript
1コード
2function lgt(){
3  var bt = "<?php echo $x; ?>";
4  var t = document.getElementById(bt).defaultValue;
5  if(t==="off"){
6    t="on";
7    document.getElementById(bt).defaultValue = t;
8  }else if(t==="on") {
9    t="off";
10    document.getElementById(bt).defaultValue = t;
11  }
12}

このJavaScriptでphpの変数を取得したコードだとエラーが出てしまいうまく切り替えることができません。
エラーコードは、
test.js:2 Uncaught TypeError: Cannot read property 'defaultValue' of null
at lgt (test.js:2)
at HTMLInputElement.onclick (test.php:10)
です。

JavaScriptとphpに詳しい方、回答お願いします。。。

m.ts10806

2019/02/13 01:41

ブラウザ「ソースを表示」から確認するとなぜ想定通り動いていないのか分かりますよ。

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

回答2件

ベストアンサー

もしかしてJSファイルにPHPのコードを書いているんですかね。
それはもちろん動きません。

PHPの処理のなかに<script>タグでJSを直接書くか、下記のようにしてPHPからJSに値を受け渡さないといけません。

php
1<?php
2
3$x="Hello";
4
5?><!DOCTYPE html>
6<html lang="ja" dir="ltr">
7<head>
8<meta charset="utf-8">
9<title>TEST</title>
10<script>
11  var bt = "<?php echo $x; ?>";
12</script>
13<script src="test.js"></script>
14</head>
15<body>
16  <form name="test">
17    <input type="button" id="<?php echo $x; ?>" value="on" onclick="lgt()">
18  </form>
19</script>
20</body>
21</html>

js
1function lgt(){
2  var t = document.getElementById(bt).defaultValue;
3  if(t==="off"){
4    t="on";
5    document.getElementById(bt).defaultValue = t;
6  }else if(t==="on") {
7    t="off";
8    document.getElementById(bt).defaultValue = t;
9  }
10}

投稿2019/02/12 14:59

kszk311

総合スコア3404

まぁわざわざidをつける意味があるかどうか微妙ですよね

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

test.js

javascript
1function lgt(obj){
2  var t = obj.defaultValue;
3  if(t==="off"){
4    t="on";
5    obj.defaultValue = t;
6  }else if(t==="on") {
7    t="off";
8    obj.defaultValue = t;
9  }
10}

実際にはこれですみます

javascript
1function lgt(obj){
2  obj.value=obj.value=="on"?"off":"on";
3}

投稿2019/02/13 02:14

yambejp

総合スコア117667

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.31%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

JavaScriptのボタン切り替え

関連した質問