質問: 以下のphpコード(tangen_top.php)で、 **2つ目のscriptタグ内(bodyの中)**に、 **関数「sendRequestToEdit(hikisuu)」が定義した**のですが、 これをそれよりも下にあるbutton 「編集」をクリックしたときに呼び出すようにした、 **onclick="sendRequestToEdit(this.value)"** のですが、 **クリックするとなぜか、 Chromeのデベロッパーツールが以下のようなエラー、** > > Uncaught ReferenceError: sendRequestToEdit is not defined > > at HTMLButtonElement.onclick (tangen_top.php:1) > > > を吐きます。 不可解な点は、以下に貼るtangen_top.phpは、一行目にはhtml開始タグ以外何も書いていないのに、そこがエラーの場所だと言ってくることです。 **しかも、デベロッパーツールのsourcesタブを開きながらボタン「編集」を押すとわかるのですが、なぜかボタンを押すと、横に表示されているマシンのディレクトリに、中身に「sendRequestToEdit(this.value)」とだけ書いてある同じファイル名のファイルtangen_top.phpが突如作成され、表示されるのです** 以下にコードを張りますので、どこが間違っているかご指摘頂けると幸いです。 ただし、これはソースコードではなく、 ページ内での操作によってデータベース処理や、Ajaxによる別のphpプログラムとの連携処理などが行われ、 HTMLが最初の状態から色々変化した後の状態でデベロッパーツールのElementタブに表示されたものコピペしたものです。 このシステムの全容を説明しようsとするとややこしくなるので、一問一答の形で質問させて頂きます。 【ファイル:tangen_top.phpのなれの果て(もはやただのHTML)】 ``` プロジェクトマネージャー Select a subject 量子力学統計力学線形代数複素関数微分積分熱力学古典力学電磁気学物性 Document 科目単元済or未量子力学一次元系の基本(イギ、オガワ等)編集量子力学井戸型ポテンシャルをちゃんと理解編集量子力学角運動量の摂動(ゼーマン、スピン軌道など)編集量子力学縮退ありの摂動論の形式論の理解編集 addrec ```
回答: JavaScriptによるエラーですね。質問コードをhtmlとして開き、「編集ボタン」をクリック→ > > SyntaxError: The string did not match the expected pattern. > > > コンソールに表示されました。 ↓該当箇所↓ ``` const code_tangen = hikisuu; const subject_name = document.querySelector('tr#' + code_tangen + ' input[name="subject_name"]').value; // <-- SyntaxError: The string did not match the expected pattern. const tangen = document.querySelector('tr#' + code_tangen + ' input[name="tangen"]').value; ``` id名を数字で始めるのがNGで、例えば、各を’`のようにアルファベットから始まるid名にすると、エラーは出ませんでした🙆♀️ ### 理由 問題箇所は、yasutomiさんが指摘されている点でした。 ただし、x_xさんが仰っる通り、**HTML5ではid名が数字から始まっていてもOK**です。 ところがです。**CSSでは、識別子(タグ名・id名・クラス名)が数字で始まるのはNG**でした。 [リンク辿った順序] Selectors Level3 => 4 Selector syntax => ID Selector => identifiers => 4.1.3 Characters and case (CSS2.1) 4.1.3 Characters and case | CSS2.1 -W3C- > > **(日本語訳)** > > CSSでは、識別子(要素名、クラス、セレクタ内のIDを含む)に使用できる文字は[a-zA-Z0-9]とISO 10646のU + 00A0以上の文字、およびハイフン( - )とアンダースコア( _); **数字、2つのハイフン、またはハイフンとそれに続く数字で始めることはできません。** ... > > > **(original)** > > In CSS, identifiers (including element names, classes, and IDs in selectors) can contain only the characters [a-zA-Z0-9] and ISO 10646 characters U+00A0 and higher, plus the hyphen (-) and the underscore (_); they cannot start with a digit, two hyphens, or a hyphen followed by a digit. ... > > > そして、それに伴い、**JavaScript**の ``` document.querySelector(SELECTOR); document.querySelectorAll(SELECTOR); ``` に渡す`SELECTOR`の文字列も、CSSのセレクターの構文規則に準じているようです。 ややこしいですね😅💦