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

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

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

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

4回答

1757閲覧

javascriptで、htmlの要素を取得

y_repres

総合スコア15

JavaScript

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2016/01/11 18:11

よろしくお願いします。

本当に基本的なことですし、解説書のサンプルを試して何度もできてるのに、
自分で試作したとたんになぜか、できなくなってしまいました。

htmlファイル内に、↓このようなフォームがあり、

<form action="" name="js" onChange="refer()"> <input id="org01" type="text"><br> <input name="org02" type="text"><br> </form>

↑テキストを変更するたびに実行したい処理を↓のように書きました

<script type="text/javascript"> function refer(){ alert (document.getElementById("org01").value); } </script>

↑しかし、まったくの無反応です。
処理内容を、
alert (document.getElementsByName("org02").value);

alert (document.getElementById("org01").name);
に変えても同じく無反応でした。
alert("ok");
に変えた時だけ反応しました。

何がいけないのか全くわかりません。
html内に同じnameやidの要素はありません。

おそらく、本当に単純な原因だと思うのですが、何をやってもどうにもなりません。
アドバイスください。

###前提・実現したいこと
(例)PHP(CakePHP)で●●なシステムを作っています。
■■な機能を実装したいのですがうまく動きません。

###発生している問題・エラーメッセージ

###ソースコード

ここにご自身が実行したソースコードを書いてください

###補足情報(言語/FW/ツール等のバージョンなど)

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

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

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

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

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

guest

回答4

0

http://jsdo.it/katoy/KbJTに作ってみました。
イメージ説明

browser の開発者ツールを使ってみるとわかったとおもうのですが、
javascript 部分でエラーが発生してました。
それを修正すると動作しました。

投稿2016/01/11 21:32

katoy

総合スコア22324

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

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

katoy

2016/01/11 21:39

class 指定を削除したら動作したとのことですが、class 指定の有無は関係ないはずです。 jsdoit での例に class 指定を加えてみました。それでも動作しています。 おそらく、css 部分でエラーが起こっているのだとおもいます。
y_repres

2016/01/11 22:13

いま、いろいろ試していたのですが、cssはまったく変更してない状態で、class指定をid指定の後に書いたら動作しました。 つまり <input class="org" id="org01" type="text"> はダメで、 <input id="org01" class="org" type="text"> はOKでした。 もう一度、質問時の最初の状態で、開発ツールを参照し、ご案内のページ(そのページの存在じたいも知りませんでした)の内容もよく考えてみます。 ありがとうございました。
guest

0

横からすみません。

少なくとも、document.getElementsByName("org02").valueでは値を取得できません。
nameは同じ名前が複数ある可能性があるため、配列が返ってきます。
つまり、document.getElementsByName("org02")[0].valueとしなければなりません。
[0]を付ければ、配列の1番目の値を取得できます。

また、「無反応」とおっしゃっているのは、フォームの「2つ目」のインプットの値が出ないということでしょうか。
それなら納得がいくのですが…。

試しに、以下のコードだけをHTMLファイルにコピペして、確認してもらえませんか。
FirefoxとGoogle Chrome、の最新版では動くことを確認しています。

HTML

1<html> 2<head> 3</head> 4<body> 5 <form action="#" name="js"> 6 <input id="org01" name="org01" type="text" onChange="refer1()"><br> 7 <input id="org02" name="org02" type="text" onChange="refer2()"><br> 8 </form> 9 10 <script type="text/javascript"> 11 function refer1(){ 12// var $output = document.getElementsByName("org01")[0].value; 13 var $output = document.getElementById("org01").value; 14 alert ($output); 15 } 16 17 function refer2(){ 18 var $output = document.getElementsByName("org02")[0].value; 19// var $output = document.getElementById("org02").value; 20 alert ($output); 21 } 22</script> 23</body> 24</html>

投稿2016/01/11 21:15

coba-coba

総合スコア1409

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

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

coba-coba

2016/01/11 21:19 編集

解決したんですね。良かったです。 ただ、上記のnameについては知っておくとよいと思います。 ちなみにclass="org"を足しても問題なく動きます。
y_repres

2016/01/11 21:17

ありがとうございました。勉強になりました。
guest

0

自己解決

いろいろ試しているうちに、解決しました。

質問文では省略していました(本当に申し訳ありませんでした)、cssで色を決めて、inputにclassを指定していたのです↓
<input class="org" id="org01" type="text"><br>
<input class="org" name="org02" type="text"><br>

こうなっていたのを、class="org"の部分を削除したら、動作しました。
ただ色とサイズを指定していただけなのになぜダメだったのか、classの指定がどうしてこんなに重大なのか謎のままですが、動作はしました。
classの指定が決定的なものとは知らず、簡潔に質問するために省略してしまい、回答者様に御迷惑をおかけしました。申し訳ありませんでした。

投稿2016/01/11 21:11

y_repres

総合スコア15

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

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

jinco

2016/01/11 21:20

解決してよかったですね。ご存知かもしれませんが、ブラウザの「開発ツール」でJavaScriptのエラーが確認できるので、自分のコードが動かないときにはここを見ると原因がわかると思います。
y_repres

2016/01/11 22:03

開発ツールじたい知りませんでした。助かります。ありがとうございました。
guest

0

onchangeはinputが変更された後に呼ばれるので、下のようにすれば動くはずです。

html

1<input id="org01" type="text" onkeyup="refer()"><br>

投稿2016/01/11 20:16

編集2016/01/11 20:37
jinco

総合スコア432

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

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

y_repres

2016/01/11 20:22

ご回答ありがとうございす。しかし、そのようにしても動きませんでした。 refer()の処理内容がalert("ok")だとちゃんとアラートが出ることから、ファンクションの呼び出し自体はできている。しかし、getElementが正しく機能していない。と予想してるのですが、どうでしょうか?
jinco

2016/01/11 20:27

scriptタグをbodyの一番下にもってくるとどうなりますか?
y_repres

2016/01/11 20:30

それでもダメでした。
jinco

2016/01/11 20:36

ごめんなさい。「テキストを変更するたび」に動かすならonchangeをonkeyupにするとキー操作で実行されます。
y_repres

2016/01/11 20:44

onkeyupに変えたところ、一文字ずつファンクションが呼びだされました。 しかし、alert("ok");の場合でしかやはり反応がありません。
y_repres

2016/01/11 21:12

申し訳ありませんでした。試行錯誤してるうちに、動作させることができました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問