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

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

新規登録して質問してみよう
ただいま回答率
85.50%
Chrome

Google Chromeは携帯、テレビ、デスクトップなどの様々なプラットフォームで利用できるウェブブラウザです。Googleが開発したもので、Blink (レンダリングエンジン) とアプリケーションフレームワークを使用しています。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

Q&A

解決済

3回答

8538閲覧

【JavaScript】関数が定義されているのに、定義されてないといわれる

WeilSpinor

総合スコア170

Chrome

Google Chromeは携帯、テレビ、デスクトップなどの様々なプラットフォームで利用できるウェブブラウザです。Googleが開発したもので、Blink (レンダリングエンジン) とアプリケーションフレームワークを使用しています。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

0グッド

0クリップ

投稿2019/05/24 11:46

編集2019/05/24 11:58

以下の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)】

php

1<html lang="ja" dir="ltr"><head> 2 <meta charset="utf-8"> 3 <title>プロジェクトマネージャー</title> 4 5 <script type="text/javascript"> 6 function sendRequest(subject_name){ 7 if (subject_name =="") { 8 document.getElementById("disp_rec").innerHTML = ""; 9 return; 10 }else{ 11 if (window.XMLHttpRequest) { 12 // code for IE7+, Firefox, Chrome, Opera, Safari 13 xmlhttp = new XMLHttpRequest(); 14 } else { 15 // code for IE6, IE5 16 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); 17 } 18 xmlhttp.onreadystatechange = function() { 19 if (this.readyState == 4 && this.status == 200) { 20 document.getElementById("disp_rec").innerHTML = this.responseText; 21 } 22 }; 23 xmlhttp.open("GET","tangen_get.php?subject_name="+subject_name,true); 24 xmlhttp.send(); 25 } 26 } 27 28 29 </script> 30 31 </head> 32 <body> 33 34 35 <select name="subject_name" onchange="sendRequest(this.value)"> 36 <option value="">Select a subject</option> 37 <option value="量子力学">量子力学</option><option value="統計力学">統計力学</option><option value="線形代数">線形代数</option><option value="複素関数">複素関数</option><option value="微分積分">微分積分</option><option value="熱力学">熱力学</option><option value="古典力学">古典力学</option><option value="電磁気学">電磁気学</option><option value="物性">物性</option> </select> 38 <div id="disp_rec"> 39 40 41 <meta charset="UTF-8"> 42 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 43 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 44 <title>Document</title> 45 <script> 46 function sendRequestToEdit(hikisuu){ 47 48 //クリックした編集ボタンに該当する単元の単元コード、科目名、単元の取得 49 const code_tangen = hikisuu; 50 const subject_name = document.querySelector('tr#'+code_tangen+' input[name="subject_name"]').value; 51 const tangen = document.querySelector('tr#'+code_tangen+' input[name="tangen"]').value; 52 53 //for debug 54 console.log("current selection:"+tangen); 55 56 if (window.XMLHttpRequest) { 57 // code for IE7+, Firefox, Chrome, Opera, Safari 58 xmlhttp = new XMLHttpRequest(); 59 } else { 60 // code for IE6, IE5 61 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); 62 } 63 xmlhttp.onreadystatechange = function() { 64 if (this.readyState == 4 && this.status == 200) { 65 document.getElementById("add_rec").innerHTML = this.responseText; 66 } 67 }; 68 xmlhttp.open("GET","tangen_edit.php?code_tangen="+code_tangen+"&subject_name="+subject_name+"&tangen="+tangen,true); 69 xmlhttp.send(); 70 } 71 alert("W"); 72 alert(typeof sendRequestToEdit); 73 </script> 74 75 76<table border="1" id=""><tbody><tr><td>科目</td><td>単元</td><td></td><td>or</td></tr><tr id="1"><input type="hidden" name="code_tangen" value="1"><input type="hidden" name="subject_name" value="量子力学"><input type="hidden" name="tangen" value="一次元系の基本(イギ、オガワ等)"><td>量子力学</td><td>一次元系の基本(イギ、オガワ等)</td><td><button type="button" value="1" onclick="sendRequestToEdit(this.value)">編集</button></td><td><input type="checkbox" class="sumi"></td></tr><tr id="3"><input type="hidden" name="code_tangen" value="3"><input type="hidden" name="subject_name" value="量子力学"><input type="hidden" name="tangen" value="井戸型ポテンシャルをちゃんと理解"><td>量子力学</td><td>井戸型ポテンシャルをちゃんと理解</td><td><button type="button" value="3" onclick="sendRequestToEdit(this.value)">編集</button></td><td><input type="checkbox" class="sumi"></td></tr><tr id="8"><input type="hidden" name="code_tangen" value="8"><input type="hidden" name="subject_name" value="量子力学"><input type="hidden" name="tangen" value="角運動量の摂動(ゼーマン、スピン軌道など)"><td>量子力学</td><td>角運動量の摂動(ゼーマン、スピン軌道など)</td><td><button type="button" value="8" onclick="sendRequestToEdit(this.value)">編集</button></td><td><input type="checkbox" class="sumi"></td></tr><tr id="9"><input type="hidden" name="code_tangen" value="9"><input type="hidden" name="subject_name" value="量子力学"><input type="hidden" name="tangen" value="縮退ありの摂動論の形式論の理解"><td>量子力学</td><td>縮退ありの摂動論の形式論の理解</td><td><button type="button" value="9" onclick="sendRequestToEdit(this.value)">編集</button></td><td><input type="checkbox" class="sumi"></td></tr></tbody></table><br><br> <div id="add_rec">addrec</div> 77 78</div> 79 80 81</body></html>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2019/05/24 12:11

実際のソースコードでないなら全く意味がないので。
m.ts10806

2019/05/24 12:15

デベロッパーツールは制作者の醜いコードをなんとかまともに動かすべくブラウザ側の補正がかかりますし。 質問者が実際に組んだコード以外、提示されても回答しようがないのです。
Lhankor_Mhy

2019/05/27 08:07

問題が再現しませんでした。 ご提示のコードを当方で試したところ、以下のエラーを得ました。 DOMException: Failed to execute 'querySelector' on 'Document': 'tr#1 input[name="subject_name"]' is not a valid selector. おそらく、ご提示いただいていない部分のコードに問題があるのか、環境の問題だと思います。
guest

回答3

0

JavaScriptによるエラーですね。質問コードをhtmlとして開き、「編集ボタン」をクリック→

SyntaxError: The string did not match the expected pattern.

コンソールに表示されました。

↓該当箇所↓

js

1const code_tangen = hikisuu; 2const subject_name = document.querySelector('tr#' + code_tangen + ' input[name="subject_name"]').value; // <-- SyntaxError: The string did not match the expected pattern. 3 4const tangen = document.querySelector('tr#' + code_tangen + ' input[name="tangen"]').value; 5

id名を数字で始めるのがNGで、例えば、各<tr>を’<tr id="t1">`のようにアルファベットから始まる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

js

1document.querySelector(SELECTOR); 2document.querySelectorAll(SELECTOR);

に渡すSELECTORの文字列も、CSSのセレクターの構文規則に準じているようです。

ややこしいですね????????

投稿2019/05/27 13:13

編集2019/05/27 13:22
退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yasutomi

2019/05/27 13:26

CSSで識別子(タグ名・id名・クラス名)が数字で始まるのがNGなら 実質的にはHTML5も誤爆防止のためにNGですね。
退会済みユーザー

退会済みユーザー

2019/05/27 15:36

なんとマニアックな素敵記事!?(′ʘ⌄ʘ‵)✨✨ ありがとうございます???? この質問ページは、id,class,セレクター周りについて、かなり充実しましたね☺️✨♪♪ というわけで☜ こちらも追加で置いておきます????w ‪• ‬Using character escapes in markup and CSS -W3C-  https://www.w3.org/International/questions/qa-escapes (CSS構文のエスケープ方法が、例を交えて分かりやすく解説されている記事。仕様書より緩い文体で読みやすい)
WeilSpinor

2019/05/29 15:16

ご回答ありがとうございます。セレクタに関しては、私の環境では先頭が数字でも問題なく動きましたが、本来的にはルール違反だということなので、アルファベットを追加しておきました。今後気を付けていこうと思います。 ただ残念ながらメインのエラーは解決ならずでした…。
guest

0

自己解決

自己解決しました。

問題は、使おうとしたけど存在しないと言われた関数「sendRequestToEdit」の定義をこのファイルtangen_top.php内のスクリプトではしておらず、ajax先のファイルのスクリプトで定義していた、というところでした。
ajax先のファイルに定義しておいて、そのスクリプトを送り返してくれれば、と期待していたんですが…
もしかして、responseTextとやっていたので、あくまでrequest先のテキストデータ(htmlなど)を返すだけで、中に描かれたスクリプトは送られてこなかったんですかね?
もしかしたら、それの代わりにresponseHtmlみたいなコマンドがあって、それをやればよかったのか…。まだまだ勉強が必要ですね。
とりあえず解決してよかったです。

投稿2019/05/29 16:21

WeilSpinor

総合スコア170

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

papinianus

2019/05/29 22:52

ajaxでもコードは返されますよ。テキストとして。 responseTextが純粋なjsコードならevalすれはコードを評価することはできます。 ajaxでhtmlだけと書いておられますが、htmlからjsだけを取り除くのがどれほど難しいか。
guest

0

<tr id="1"> となっていますが、
id属性の先頭はアルファベットでなければならないという決まりがあるため
idに数字だけを指定しているコードは正常に動作しないです。

アルファベットで始めなければなりません。(数字や記号で始めてはならない)

https://www.tagindex.com/html_tag/attribute/id.html

投稿2019/05/24 12:25

yasutomi

総合スコア2937

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

x_x

2019/05/27 06:08

それは HTML4 の話です。質問の提示コードは内容から HTML5 と考えられます。 なぜそんなところを参照したのかわかりませんが、あえて TAG index 中から探すというのならここでしょう。 https://www.tagindex.com/html5/attribute/id.html 仕様から https://momdo.github.io/html/dom.html#global-attributes > id属性はその要素の固有識別子(ID)を指定する。 IDを取ることができる形式に制限は存在しない。具体的に、IDは数字のみまたは句読点のみで構成することができ、数字やアンダースコアで開始できる、などである。
yasutomi

2019/05/27 13:33 編集

HTML5ではidは数字やアンダースコアで開始できるが正しいですね。 訂正します。
WeilSpinor

2019/05/29 15:16

ご回答ありがとうございます。セレクタに関しては、私の環境では先頭が数字でも問題なく動きましたが、本来的にはルール違反だということなので、アルファベットを追加しておきました。今後気を付けていこうと思います。 ただ残念ながらメインのエラーは解決ならずでした…
x_x

2019/05/30 00:45

全然コメント読んでいないようですね。 コメントを信用しなくても構いませんが、リンク先を見るくらいはしてみたらどうでしょうか?
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問