Q&A
要件別なら質問もわけてください。
開発環境と使用言語
使用ツール->Visual Studio Code(for Mac)
実行環境->Chrome
使用言語->javascript, php, html
問題点
フォームに入力された内容に応じてデータベースにあるデータも使って計算結果を表示するwebページを作ろうとしています。htmlページとjavascriptページとphpページはそれぞれ別に持っている状態です。現在コードを実行しようとしたところ、onclick属性を付与したbuttonをクリックしてもjavascript内のコード(innerHTML)が作動しなかったので上手く連携できてないのだと思われます。どうしたら改善できますか？教えてください。
onclick属性での検証をした理由は、コードを組んでる最中、宣言した変数にカーソルを当てたところ「'atkId' が宣言されていますが、その値が読み取られることはありません。」と表示されて驚いたからです。きっとこれが表示されるのも連携できてないのに原因があると考えてます。
あとPHPに関しては、データベースに繋げるか不安で一緒に相談したいです。繋げたかどうかの確認が取れない（役割がDBから持ってきたデータをjavascriptに届けるものであるため）のでそこでつまづきたくないので質問させてください。現状としては、ノートパソコンから作ったmysqlテーブルを呼び起こすものになってますが、それはweb上に公開した時にノートパソコンの不具合とかに繋がったりしますか？教えてください。でもJavascriptのエラー解決メインでお願いします。
どんどん必要な情報は追記するのでどうかご回答お願いいたします！
コードは、見やすくするために大幅カットをしたので特にhtmlは文法ミスが生じてるかもしれませんがそこは無視していただいて結構ですm(_ _)m
ファイル名はそれぞれ、
html -> index.html
javascript -> instead.js
php -> connectdatabase.php
です
ソースコード
html
1//bodyは結構省略してます 2<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 3<html> 4<head> 5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 6 <meta http-equiv="Content-Style-Type" content="text/css"> 7 <link rel="stylesheet" href="stylesheet.css"> 8 <php type="text/php" src="connectdatabase.php"></php> 9 <script type="text/javascript" src="instead.js"></script> 10 <title></title> 11</head> 12 13<body> 14 <div class="top"> 15 <h2>ダメージ計算</h2> 16 <img class="topicon" src="iconimg.jpeg" width="150px";> 17 </div> 18 19 <div class= "main"> 20 <div class= "main-upper"> 21 <div class= "attack-input"> 22 <p>アタッカーの設定</p> 23 <p> 24 <form action="connectdatabase.php" method="post"> 25 <label for ="attackerSelect">妖怪の名前:</label> 26 <select id="atkName" name="attackerSelect"> 27 <option value="">Please choose anything</option> 28 <option value="1">未定</option> 29 </select> 30 </form> 31 </p> 32 <p> 33 <label for ="feelSelect">検証する技:</label> 34 <select id="atkType" name="feelSelect"> 35 <option value="1">物理技の火力</option> 36 <option value="2">必殺技の火力</option> 37 </select> 38 </p> 39 </div> 40 </div> 41 42 <div class="main-downdown"> 43 <label for="label1">計算する</label> 44 <input type="button" id="label1" onclick="getValue(); appearSentence(); " > 45//onclick属性はここのことです ！ 46 </div> 47 </div> 48 <div class="result" id="innerHTMLtxt"></div> 49</body> 50</html>
javascript
1//省略してます 2function appearSentence(){ 3 innerHTMLtxt.innerHTML = "上手く連携できてるか確認用"; 4 5function getValue() { 6 let atkId = Option(document.getElementById("atkName").value); 7 //省略してます 8} 9
php
1<?php 2 3// データベースに接続するために必要なデータソースを変数に格納 4 // mysql:host=ホスト名;dbname=データベース名;charset=文字エンコード 5$dsn = 'mysql:host=localhost;dbname=企業秘密！;charset=utf8'; 6 7 // データベースのユーザー名 8$user = 'user'; 9 10 // データベースのパスワード 11$password = '企業秘密です！'; 12 13// tryにPDOの処理を記述 14try { 15 // PDOインスタンスを生成 16 $dbh = new PDO($dsn, $user, $password); 17 18// エラー（例外）が発生した時の処理を記述 19} catch (PDOException $e) { 20 21 // エラーメッセージを表示させる 22 echo 'データベースの接続に失敗しました！アイムゾーリー' . $e->getMessage(); 23 // 強制終了 24 exit; 25} 26 27//これはアタッカーのID(多分) 28$atkId = $_POST['attackerSelect']; 29$sql = "SELECT status_a_h WHERE id = 'atkId' FROM yokai_data";// SELECT文を変数に格納 30$atkStatus_a_h = $dbh->query($sql);// SQLステートメントを実行し、結果を変数に格納 31$sql = "SELECT status_a_a WHERE id = 'atkId' FROM yokai_data"; 32$atkStatus_a_a = $dbh->query($sql); 33//省略してます 34 35 36//配列の値をそれぞれ取り出して計算したい... 37 38//jsonにひたすら書き換えてる場所 39$atkAH_json = json_encode( $atkStatus_a_h );//atk用 40$atkAA_json = json_encode( $atkStatus_a_a ); 41 //省略してます
＞よければ間違いなどあったら訂正をお願いしたいです
レビュー依頼はこのサイトの趣旨とずれていると思います。
>>mtsさん
２つの質問が一つのゴールにつながるので同時に質問した方が後でこの知恵袋を見にくる方の時間短縮につながるかと思いこうしました。今度からは分けて質問します。
>>kurageさん
ごめんなさい。PHPに関してはデータベース接続に関する知識を分けて欲しかったんです。
> あとPHPに関しては、データベースに繋げるか不安で一緒に相談したいです。繋げたかどうかの確認が取れない（役割がDBから持ってきたデータをjavascriptに届けるものであるため）のでそこでつまづきたくないので質問させてください
これについては「データベースに繋いでシステム日付を取得するSQL(SELECT CURDATE();)の結果をechoで表示するだけ」のような、非常に単純なphpプログラムを作成してそのphpのurlを直接ブラウザに入力するなどして結果を確認するのが良いです。
動くかどうか分からない機能(例えばDB操作機能)を使って複雑なプログラムを作るのは悪手です。
まず機能が動くことだけを確認しましょう。
なるほど！確かに検証前に大掛かりなことをして失敗したら時間の大損ですね！ありがとうございます！
urlを貼り付ける手順のところもう少し詳しく教えていただけませんか？
ブラウザのアドレスバーにphpのurlを打ち込んでエンターキーを押してください。
1個ずつ解決すべきで、JavaScriptに精通している人とPHPに精通している人は必ずしも一致しないためです。（私はどちらも業務で扱っていますが、問題が別なら質問は別にすべきという意見は変わりません。１個解決したからと次もそのまま繋がるとは限りません）
>現状としては、ノートパソコンから作ったmysqlテーブルを呼び起こすものになってますが、それはweb上に公開した時にノートパソコンの不具合とかに繋がったりしますか？教えてください。
ノートパソコンからどこに作られた（インストールされた）MySQLかによるので、やはり全く別問題です。
ノートパソコン内に設置されたMySQＬとしてもどういう手法で（Webサーバがどこにあるか）によって違いますので、全然別問題です。
ただ、自身のPCをWebサーバーとして公開するのでなければPC自体の不具合にはなりません。
了解です！確かにそうですね、、、
丁寧なご教授ありがとうございます
回答1件
0
ベストアンサー
onclick属性を付与したbuttonをクリックしてもjavascript内のコード(innerHTML)が作動しなかった
javascriptの中括弧の対応がおかしいため、getValue関数をhtml内のonclickから見ることができていません。
以下のようにすればonclickからgetValue関数を実行できます。
javascript
1function appearSentence(){ 2 innerHTMLtxt.innerHTML = "上手く連携できてるか確認用"; 3} 4 5function getValue() { 6 //let atkId = Option(document.getElementById("atkName").value); 7}
投稿2021/11/05 01:35
総合スコア4524
回答ありがとうございます！}が余分についてるのは、私がコードを省略したときに生じたミスなので、関係ないと思われます。質問がちゃんとしてないあまりに余計に時間をとってしまい申し訳ないです。
以下のリンクの動画は、私のコードが実行できない様子を映してるものなので、もし宜しければそちらを拝見したあともう一度回答お願いできませんか？よろしくお願いします。
https://youtu.be/Ommihs0nsOk
仮に｝が余分についているのが投稿時のミスだとしても、上のコードは実際に動作してボタンを押すことでinnerHTMLtxt要素の表示が切り替わることは確認済みです。
つまり「javascript内のコード(innerHTML)が作動しなかった」という問題は発生していません。
問題を切り分けてみましょう。
ブラウザでF12を押して開発者ツールを開きボタンを押した時にコンソールにエラーが出ないか確認してみましょう。
エラーが起きていないならブレークポイントを置くなどして、目的動作が実現されない理由を探しましょう。
開発ツールのこと教えてくれてありがとうございます！依然として私のところでは反応しません．．．何がいけないのでしょうか？
https://youtu.be/kHNRvn9kSrc
htmlは更新できているけれど画面表示は更新されていない、というのは確認できますよね？
では次はテキストエディタで直接htmlを編集して「<div class="result" id="innerHTMLtxt">この計算はデモです</div>」のように変更し、それが表示されるか見てみましょう。
表示されないなら「問題はjavascriptではなくhtmlやスタイルシートにある」というように問題を切り分けられます。
次はcssを一切使わないで表示させて、htmlが原因か、スタイルが原因かを切り分けましょう。
そのようにして「何がいけないのか」を探っていくとよいでしょう。
（まあ勘で言うとclass="main"とかclass="result"のスタイルが問題の原因という気はしますが）
あなたの回答
tips
プレビュー
