DOM要素にする方法

大学の課題でプログラミングをやっていますが正常に動きません。先生がいうには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>

arasi

2018/06/08 10:38

var file = "share/city" + idx + ".html";　このshare/city1.htmlの内容はどうなっているのでしょうか

jack-1

2018/06/08 10:54

このプログラムはいくつかの選択肢から地名を選ぶというプログラムになっておりshare/city1.htmlはその選択肢の一つの集合という形になっています。

papinianus

2018/06/08 10:56

そのようなことはarasiさんもご理解なさっているものと思います。それが<option value="0" checked>都市を選んでください</option>のような形をしているのか具体的な内容を提示することが半ば矛盾し半ば記載の不十分な質問を解決する役に立つと仰っているものと推測します

m.ts10806

2018/06/08 21:40 編集

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

m.ts10806

2018/06/08 21:34

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

行動規範の内容に同意します

回答3件

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

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

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

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

投稿2018/06/08 10:32

yambejp

総合スコア114814

jack-1

2018/06/08 10:46

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

行動規範の内容に同意します

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

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

投稿2018/06/08 10:37

papinianus

総合スコア12705

papinianus

2018/06/08 10:39 編集

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

jack-1

2018/06/08 10:47

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

papinianus

2018/06/08 10:54

「id="city"は変えない」「cityの部分をareaにしてしまうと出力結果の意味が違ってしまう」という前提条件を置いたとき、「elmCityがselectboxのdom要素となる」という先生の助言は必ず偽になります(恒偽式)。というのは、「変えない」状態では、selectboxはareaしかなく、かつareaはelemcityのselectboxではない(意味が違う)からです。従って背理法により、あなたが私とyambejpさんに付けたコメント2つ、先生の言っていることのどれかが間違っていると推論できます。余談ですが、onloadイベントハンドラを足せばロードするやいなや、動的にid="city"のpタグを消して、id="city"であるselectを作ることはできますが、そういうことが意図されている課題、あるいはそういうことが無から作成できる学習段階とは思えないので割愛しました。

jack-1

2018/06/08 11:12

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

行動規範の内容に同意します

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

投稿2018/06/09 05:04