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

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

ただいまの
回答率

90.86%

  • JavaScript

    14228questions

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

DOM要素にする方法

受付中

回答 3

投稿

  • 評価
  • クリップ 0
  • VIEW 109

jack-1

score 1

大学の課題でプログラミングをやっていますが正常に動きません。先生がいうには37行目の var elmCity = document.getElementById( "city" );を修正してelmCityがselectboxのdom要素となるようにすればいいらしいのですがどうすればいいでしょうか?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>JavaScript入門8</title>
<script type="text/javascript">
  window.addEventListener( "load",
    function(){
      var elm = document.getElementById( "area" );
      elm.addEventListener( "change", getCity, false );
      var elmBtn = document.getElementById( "btn" );
      elmBtn.addEventListener( "click", confirm, false );
    },
    false );
  function getCity(){
    var elm = document.getElementById( "area" );
    var idx= elm.selectedIndex;
    var elmCity = document.getElementById( "city" );
    var req = new XMLHttpRequest();
    var file = "share/city" + idx + ".html";
    req.open("GET", file+"?r="+Math.random());
    req.onreadystatechange = function(){
      if(req.readyState == 4 && req.status == 200){
        elmCity.innerHTML = req.responseText;
      }
    };
    req.send();
  }
  function confirm(){
    var elmKekka = document.getElementById( "kekka" );
    var elmArea = document.getElementById( "area" );
    var idxArea = elmArea.selectedIndex;
    if( idxArea == 0 ){
      elmKekka.innerText = "エリアを選択して下さい";
      return;
    }
    var elmCity = document.getElementById( "city" );
    var idxCity = elmCity.selectedIndex;
    if( idxCity == 0 ){
      elmKekka.innerText = "都市を選択して下さい";
      return;
    }
    var area = elmArea.options[idxArea].value;
    var city = elmCity.options[idxCity].value;
    elmKekka.innerText = "目的地は "+area+" "+city+" ですね";
  }
</script>
</head>
<body>
<h1>海外旅行</h1>
<p>エリア選択
<select id="area">
<option value="0" checked>エリアを選んで下さい</option>
<option value="アジア">アジア</option>
<option value="ハワイ・グアム">ハワイ・グアム</option>
<option value="オセアニア">オセアニア</option>
<option value="北米">北米</option>
<option value="ヨーロッパ">ヨーロッパ</option>
<option value="中南米">中南米</option>
<option value="中近東・アフリカ">中近東・アフリカ</option>
</select>
</p>
<p id="city"></p>
<input id="btn" type="button" value="決定"/>
<p id="kekka"></p>
</body>
</html>
  • 気になる質問をクリップする

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • 退会済みユーザー

    2018/06/08 20:25

    複数のユーザーから「やってほしいことだけを記載した丸投げの質問」という意見がありました
    「質問を編集する」ボタンから編集を行い、調査したこと・試したことを記入していただくと、回答が得られやすくなります。

  • mts10806

    2018/06/09 06:40 編集

    後出しの要件が多いのでしっかり整理して質問に追記してください。「何をゴールとしているコードなのか」という要件です。ただ動いたらいいのか?コードは何かしらの目的や成果のために組まれます。このコードはどのような成果を出すコードなのでしょうか? その部分をしっかり書かないと的確な回答はつきません。先生が指示したところしか見ていないのでしたらおそらく解決には向かいません。コードは1行だけではありませんよね。全体から見ていく必要がありますよ。 ということで整理してください。 質問は編集することができます。

    キャンセル

  • mts10806

    2018/06/09 06:34

    あと「DOM要素」という用語 どこまで理解されているのでしょうか?分かっている範囲、分かっていない範囲を明確にしてください。https://teratail.com/help/question-tips#questionTips2-1

    キャンセル

回答 3

+3

何が正解かはちょっとわかりかねますが、先生がおっしゃるように

var elmCity = document.getElementById( "city" );

が間違ってます
id=cityの要素はpタグなのでselectedIndexをもちません
selctedIndexをもつのはselectタグなので例示にあるセレクトボックスは
id=areaだけなので、それに書き換えます

  var elmCity = document.getElementById( "area" );

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/06/08 19:46

    cityの部分をareaにしてしまうと出力結果の意味が違ってしまうためこの課題の答えにはなりません。言葉足らずですみません…

    キャンセル

+2

推測で答えます。その助言のポイントは「dom要素」ではなく「selectbox」です。

cityはおそらく、選択肢(プルダウン)となることが想定されるはずなのにpタグになっています。areaのように、selectタグにしましょう

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/06/08 19:39 編集

    getcityでフェッチしようとしているので、id="city"のところが、<select id ="city"></select>であれば、選択肢ができあがるものと思います。ここで37行目を"area"にすると意味が変わると想定しています

    キャンセル

  • 2018/06/08 19:47

    課題では<p id="city"></p>は変えないようにするため、考えてもらって悪いのですがこの課題の答えにはなりません。

    キャンセル

  • 2018/06/08 19:54

    「id="city"は変えない」「cityの部分をareaにしてしまうと出力結果の意味が違ってしまう」という前提条件を置いたとき、「elmCityがselectboxのdom要素となる」という先生の助言は必ず偽になります(恒偽式)。というのは、「変えない」状態では、selectboxはareaしかなく、かつareaはelemcityのselectboxではない(意味が違う)からです。
    従って背理法により、あなたが私とyambejpさんに付けたコメント2つ、先生の言っていることのどれかが間違っていると推論できます。

    余談ですが、onloadイベントハンドラを足せばロードするやいなや、動的にid="city"のpタグを消して、id="city"であるselectを作ることはできますが、そういうことが意図されている課題、あるいはそういうことが無から作成できる学習段階とは思えないので割愛しました。

    キャンセル

  • 2018/06/08 20:12

    ありがとうございます。今この課題で変えるべきなのは37行目のみで、そこを変えればいいそうなのですがそれは難しいようですね…。一回先生に連絡してみます。

    キャンセル

0

areaセレクトボックス要素の選択による発火で、cityの情報を取得しているんですね。
とりあえずreq.responseTextの内容も書いておけば回答者も楽になると思います

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

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

  • ただいまの回答率 90.86%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • JavaScript

    14228questions

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