PHPから出力したHTMLでJavaScriptが動作しない - PHPプロ!Q&A掲示板

4958

  • 募集中!! 0P

PHPから出力したHTMLでJavaScriptが動作しない

質問日時 / 2018年6月30日 01:05    回答数 / 2件

Questioner:  Hiromitsu  このエントリーをはてなブックマークに追加 

いつもお世話になります。
今回はPHPで生成した出力済みHTMLの中でJavaScriptがonclickに反応してくれない問題の切り分けと解決に向けたアドバイスをいただきたく投稿させていただきました。
それと、onclickはキーボードのenterやspacebarでも反応してくれるのか、もしキーボード
オペレーションも考えるならonclickに加えて設定すべきイベントがあるのかも教えてもらえるとうれしく思います。
今回はコードを張らせてもらいます。
  1. #!/usr/local/bin/php53
  2. <?php
  3. mb_internal_encoding("SJIS");
  4. if(!$_POST[mood_id]) select_mood();
  5. if($_POST[mood_id]) select_song();
  6.  
  7. function select_song(){
  8.  
  9. print<<<output
  10. <html>
  11. <head>
  12. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  13. <meta http-equiv="content-type" content="text/html; charset='Shift_JIS'">
  14. <script type="text/javascript">
  15. function show_lyric(){
  16. var hnd=document.getElementbYId("lrcfrm");
  17. hnd.document.style.visibility="visible";
  18. hnd=document.getElementById("sowlrc");
  19. hnd.document.style.visibility="collapse";
  20. hnd=document.getElementById("hdnlrc");
  21. hnd.document.style.visibility="visible";
  22. }
  23.  
  24. function hide_lyric(){
  25. var hnd=document.getById("lrcfrm");
  26. hnd.style.visibility="collapse";
  27. hnd=document.getElementById("sowlrc");
  28. hnd.style.visibility="visible";
  29. hnd=document.getElementById("hdnlrc");
  30. hnd.style.visibility="collapse";
  31. }
  32. </script>
  33.  
  34. <style type="text/css">
  35. #lrcfrm{
  36. max-width:85%;
  37. visibility:collapse;
  38. }
  39.  
  40. #sowlrc{
  41. hight:40px;
  42. visibility:visible;
  43. }
  44.  
  45. #hdnlrc{
  46. hight:40px;
  47. visibility:collapse;
  48. }
  49. </style>
  50. <title>あなたの思う成りたいが願いから目標に変わる応援歌マッチングサイト|楽曲ページ</title>
  51. </head>
  52. <body bgcolor="#000000" text="#FFFFFF" color="#FFFFFF" width="100%" font-size="5" style="max-width:90%; margin:auto">
  53. <br><br>
  54. <h1>
  55. あなたの思う成れたらを<br>
  56. 願いから目標に変える<br>
  57. 応援歌マッチングサイト</h1><br>
  58. <h2>楽曲ページ</h2>
  59. output;
  60. $db=new mysqli("localhost","user","password","dbname");
  61. $db->set_charset("SJIS");
  62. $result=$db->query("select * from songs_list where mood_id='{$_POST[mood_id]}'");
  63. while($row=$result->fetch_assoc()){
  64. print('<p>'.$row[singer].' - <a href="'.$row[song_file].'" download="'.$row[song_title].'.m4a">'.$row[song_title].'をダウンロード</a></p>');
  65. print('<input type="button" onclick="show_lyric()" id="sowlrc" value="歌詞表示">');
  66. print('<input type="button" onclick="hide_lyric()" id="hdnlrc" value="歌詞非表示">');
  67. print('<iframe src="'.$row[lyrics_url].'" id="lrcfrm"></iframe>');
  68. }
  69. $result->close();
  70. $db->close();
  71. print<<<output
  72. </body>
  73. </html>
  74. output;
  75. exit();
  76. }
  77.  
  78. function select_mood(){
  79. print<<<output
  80. <html>
  81. <head>
  82. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  83. <meta http-equiv="content-type" content="text/html; charset='Shift_JIS'">
  84. <title>あなたの思う成りたいが願いから目標に変わる応援歌マッチングサイト|このサイトの特徴的機能</title>
  85. </head>
  86. <body bgcolor="#000000" text="#FFFFFF" color="#FFFFFF" width="100%" font-size="5" style="max-width:90%; margin:auto">
  87. <br><br>
  88. <h1>
  89. あなたの思う成れたらを<br>
  90. 願いから目標に変える<br>
  91. 応援歌マッチングサイト</h1><br>
  92. <p>あなたが今成れたらいいなあと思っていることに最も近いものを下のプルダウンメニューから選んでください。</p>
  93. <form method="post" action="$_SERVER[PHP_SELF]">
  94. <select name="mood_id">
  95. output;
  96. $db=new mysqli("localhost","user","password","dbname");
  97. $db->set_charset("SJIS");
  98. $result=$db->query("select * from songs_list order by mood_id asc");
  99. while($row=$result->fetch_assoc()){
  100. print('<option value="'.$row[mood_id].'">'.$row[mood].'</option>');
  101. }
  102. $result->close();
  103. $db->close();
  104. print<<<output
  105. </select>
  106.  
  107. <input type="submit" value="検索">
  108. </form>
  109. </body>
  110. </html>
  111. output;
  112. exit();
  113. }
  114. ?>
根本的な勘違いをしているなら、ここには親切な方がたくさんいらっしゃるのでご指導ご鞭撻いただけるものと信じています。


ツリー一覧

┗A01shimix「phpで書き出しているから」ではないエラーがたくさ
 ┗A01-1Hiromitsuコードの書き直しから基本的なWEBコーディング手順、

回答一覧

並び替え:

A01 満足
answerershimix [6月30日 19:57] (最終編集:6月30日 20:08)

「phpで書き出しているから」ではないエラーがたくさんあります。正しく動作することを確認してから、phpで動的に生成するのが普通の手順です。

× var hnd=document.getElementbYId("lrcfrm");
〇 var hnd=document.getElementById("lrcfrm");

× hnd.document.style.visibility="visible";
〇 hnd.style.visibility="visible";

JavaScript部分を
  1. <script type="text/javascript">
  2. function show_lyric(){
  3. var hnd=document.getElementById("lrcfrm");
  4. hnd.style.visibility="visible";
  5. hnd=document.getElementById("sowlrc");
  6. hnd.style.visibility="collapse";
  7. hnd=document.getElementById("hdnlrc");
  8. hnd.style.visibility="visible";
  9. }
  10.  
  11. function hide_lyric(){
  12. var hnd=document.getElementById("lrcfrm");
  13. hnd.style.visibility="collapse";
  14. hnd=document.getElementById("sowlrc");
  15. hnd.style.visibility="visible";
  16. hnd=document.getElementById("hdnlrc");
  17. hnd.style.visibility="collapse";
  18. }
  19. </script>
とすれば動作すると思います。



(蛇足)
><form method="post" action="$_SERVER[PHP_SELF]">

$_SERVER[PHP_SELF] を使うのはやめましょう(検索すれば理由はHitします)。

>$result=$db->query("select * from songs_list where
>mood_id='{$_POST[mood_id]}'");

POSTされた値を直接SQL文に記載するのはアウトです。(mysqli関数なら)mysqli_real_escape_stringを通すべき。

http://php.net/manual/ja/mysqli.real-escape-string.php


文字セットがSJISかぁ・・・とは思いますがphpも5.3(4年前にセキュリティサポートが終わっている)ですしねぇ。古いサーバで動いている古いスクリプトを保守しないといけない立場なんでしょうか(汗

この意見に回答する

ツリーへ TOPへ

A01-1
replyerHiromitsu [7月4日 02:24]

コードの書き直しから基本的なWEBコーディング手順、やってはいけないことまで丁寧な回答ありがとうございました。
どうしてもGoogle Chromeでは対応できたのですが、IE11では対応できていないようだった(非表示になっているのかもしれないけどスクリーンリーダーがどちらのボタンを押しても読み方がへんかしなかった)ので、displayプロパティで変更することにしました。

今後ともよろしくお願いんします。

この意見に回答する

ツリーへ TOPへ

<<質問一覧へ



Pick Up Q&A

Q
ログファイルの中の空のデータ行を削除したい
 このエントリーをはてなブックマークに追加 
A
ログのデータ個数(列数)が固定で、空のログが"<><><>"だと既知であれば if ($line === "<><><>") { continue; } で読み飛ばしてもいいのでは? ...

>>続きを読む

まずは配列や文字列の扱いから、じっくり勉強して行きましょう。

▲解説者:岡本(アシアル株式会社 教育コーディネーター兼 システムエンジニア)