JavaScript配列から複数の入力を同時に入力する

debugcn 投稿 Dev

BJG

[ターゲット名]選択ボックスで選択したオプションの値を赤経ボックスと赤緯ボックスに入力しようとしていますが、まだ成功していません。どうすればよいですか？

スクリプトは、次のドロップダウンにデータを入力し、続いて下部のテーブルにデータを入力するなど、他に必要なすべてのことを実行しますが、赤経ボックスと赤緯ボックスにデータを入力できません。

ここでチュートリアルやその他の回答済みの質問を検索しましたが、まだ役に立ったものは見つかりませんでした。

const celestial_spheres = [{
    "id": 134578521,
    "name": "M15",
    "right_ascension": "21:29:58.33",
    "declination": "+12:10:01.2",
    "filters": [{
        "name": "Red (R)",
        "values": ['M15', "21:29:58.33", "+12:10:01.2", 'N/A', 'Red (R)', '<p id="datetime">', '<a href="//www.faulkes-telescope.com/wp-content/uploads/M15-Red.jpeg" target="_blank">M15 Red (R)</a>']
      },
      {
        "name": "Green (V)",
        "values": ['M15', "21:29:58.33", "+12:10:01.2", 'N/A', 'Green (V)', '<p id="datetime">', '<a href="//www.faulkes-telescope.com/wp-content/uploads/M15-green.jpeg" target="_blank">M15 Green (V)</a>']
      },
      {
        "name": "Blue (B)",
        "values": ['M15', "21:29:58.33", "+12:10:01.2", 'N/A', 'Blue (B)', '<p id="datetime">', '<a href="//www.faulkes-telescope.com/wp-content/uploads/M15-Blue.jpeg" target="_blank">M15 Blue (B)</a>']
      }
    ]
  },
  {
    "id": 21412155,
    "name": "M27",
    "ascension": "19:59:36.34",
    "declination": "+22:43:16.09",
    "filters": [{
        "name": "Red (R)",
        "values": ['M27', "19:59:36.34", "+22:43:16.09", 'N/A', 'Red (R)', '<p id="datetime">', '<a href="//www.faulkes-telescope.com/wp-content/uploads/M27-Red.jpeg" target="_blank">M27 Red (R)</a>']
      },
      {
        "name": "Green (V)",
        "values": ['M27', "19:59:36.34", "+22:43:16.09", 'N/A', 'Green (V)', '<p id="datetime">', '<a href="//www.faulkes-telescope.com/wp-content/uploads/M27-Green.jpeg" target="_blank">M27 Green (V)</a>']
      },
      {
        "name": "Blue (B)",
        "values": ['M27', "19:59:36.34", "+22:43:16.09", 'N/A', 'Blue (B)', '<p id="datetime">', '<a href="//www.faulkes-telescope.com/wp-content/uploads/M27-Blue.jpeg" target="_blank">M27 Blue (B)</a>']
      }
    ]
  },
  {
    "id": 452456321347564364,
    "name": "NGC891",
    "ascension": "02:22:33.4",
    "ra": "02:22:33.4",
    "declination": "+42:20:57.0",
    "dec": "+42:20:57.0",
    "filters": [{
        "name": "Red (R)",
        "values": ['NGC891', "02:22:33.4", "+42:20:57.0", 'N/A', 'Red (R)', '<p id="datetime">', '<a href="//www.faulkes-telescope.com/wp-content/uploads/NGC891-Red.jpeg" target="_blank">NGC891 Red (R)</a>']
      },
      {
        "name": "Green (V)",
        "values": ['NGC891', "02:22:33.4", "+42:20:57.0", 'N/A', 'Green (V)', '<p id="datetime">', '<a href="//www.faulkes-telescope.com/wp-content/uploads/NGC891-Green.jpeg" target="_blank">NGC891 Green (V) (R)</a>']
      },
      {
        "name": "Blue (B)",
        "values": ['NGC891', "02:22:33.4", "+42:20:57.0", 'N/A', 'Blue (B)', '<p id="datetime">', '<a href="//www.faulkes-telescope.com/wp-content/uploads/NGC891-Blue.jpeg" target="_blank">NGC891 Blue (B)</a>']
      }
    ]
  }
];


const sphere_options = spheres => spheres.map(sphere => `<option value="${ sphere.id }">${ sphere.name }</option>`).join('');
const filter_options = filters => filters.map(filter => `<option value="${ filter.name }">${ filter.name }</option>`).join('');
const sphere_filter_row = (id, filter) => {
  const cells = filter.values.map(value => `<td>${ value }</td>`).join('');
  return `<tr id="sphere_${ id }" data-type="${ filter.name }">${ cells}</tr>`;
};


const select_sphere = event => {
  const sphere_id = parseInt(event.target.value, 10);
  const sphere = celestial_spheres.find(sphere => sphere.id === sphere_id);
  if (!sphere) throw new Error(`application.select_sphere - cannot find the sphere with id ${ sphere_id }`);
  else {
    const filter_selection = document.querySelector('#sphere_filters');
    const filters = filter_options(sphere.filters);
    filter_selection.innerHTML = `<option value="default">Please select a filter...</option>${ filters }`;
    const header = document.querySelector('#sphere_name');
    header.innerHTML = sphere.name;
    const ascension = document.querySelector('#right_ascension');
    ascension.innerText = sphere.ascention;
    const declination = document.querySelector('#declination');
    declination.innerText = sphere.declination;
    const sphere_rows = document.querySelector('#sphere_rows');
    sphere_rows.innerHTML = '';
  }
};

const select_filter = event => {
  const sphere_id = parseInt(document.querySelector('#celestial_spheres').value, 10);
  const sphere = celestial_spheres.find(sphere => sphere.id === sphere_id);
  const filter_name = event.target.value;
  const filter = sphere.filters.find(filter => filter.name === filter_name);
  const row = sphere_filter_row(sphere_id, filter);
  const sphere_rows = document.querySelector('#sphere_rows');
  sphere_rows.innerHTML = row;
};

const show_detail = event => {
  const row = event.target.closest('tr');
  const sphere_id = parseInt(row.getAttribute('id').slice(7), 10);
  const sphere = celestial_spheres.find(sphere => sphere.id === sphere_id);
  alert(`You clicked the value "${ event.target.innerText }" of sphere "${ sphere_id }".`);
  // Do stuff with the clicked cell
};

window.addEventListener('DOMContentLoaded', () => {
  const sphere_selection = document.querySelector('#celestial_spheres');
  sphere_selection.innerHTML += sphere_options(celestial_spheres);
  sphere_selection.addEventListener('change', select_sphere);
  const filter_selection = document.querySelector('#sphere_filters');
  filter_selection.addEventListener('click', select_filter);
  const sphere_rows = document.querySelector('#sphere_rows');
  sphere_rows.addEventListener('click', show_detail);
});



$(document).ready(function() {
  $('[data-toggle="tooltip"]').tooltip();
});

<div class="form-group">
  <div class="row">
    <div class="col"><label for="target-list" title="Select the celestial opject you wish to see">Target Name:</label></div>
  </div>
  <select id="celestial_spheres" type="select" name="name" class="button form-control" aria-required="true" aria-invalid="false">
    <option value="default">Select a Target...</option>
  </select>
  <div class="alert alert-danger" style="display: none;"></div>
</div>
<div class="form-group"><label title="The distance of a point east of the First Point of Aries, measured along the celestial equator and expressed in hours, minutes, and seconds.">Right Ascention:</label>
  <span id="right_ascention"></span>
  <input id="#right_ascention" type="text" placeholder="HH:MM:SS.S" name="ascension" class="form-control" aria-required="true" aria-invalid="false">
  <div class="form-group"><label title="The angular distance of a point north or south of the celestial equator">Declination:</label>
    <span id="declination"></span>
    <input id="#declination" type="text" placeholder="DD:MM:SS.S" name="#declination" id="#declination" class="form-control" aria-required="true" aria-invalid="false"></div>
</div>

<div><label class="wrapper" for="states" title="Select whether you'd like to use the Red, Blue or Green filter for your image">Filter</label>
  <select id="sphere_filters" type="select" name="name" placeholder="Target Name..." class="button form-control" aria-required="true" aria-invalid="false">
    <option value="default">Select a Filter...</option>
  </select>
</div>

<div class="form-group"> </div>
<div class="form-group"><label title="How long would you like the camera to image the object, disabled in simulation mode">Exposure Time:</label> <input name="exposureSeconds" type="number" id="exposure-time-input" placeholder="N/A" class="form-control" aria-required="true"
    aria-invalid="false">
  <div class="alert alert-danger" style="display: none;"></div>
</div>
</form>
<div class="total-time-text">&nbsp;</div>
<div data-toggle="tooltip" title="" data-placement="right" class="tooltip-wrapper ">

  <button onClick="getElementById()" type="button" class="btn btn-success btn-block">
              Go!
            </button></div>
<div class="container">
  <div class="col-md-12"><br> <br>
    <div>
      <div class="row">
        <div class="col">
          <div class="row">
            <div class="col">
              <!---->
            </div>
          </div>
          <div class="row">
            <div class="col">
              <div class="table-caption mb-1">Session Images</div>
            </div>
            <div class="col-auto"><a href="https://archive.lco.global/?PROPID=FTPEPO2017AB-002&amp;SITEID=coj&amp;TELID=0m4a&amp;start=2019-01-09%2010:15&amp;end=2019-01-09%2010:45" target="_blank">LCO Science Archive (this session's images)</a></div>
          </div>
          <div style="height: 300px; overflow: auto;">


            <table id="session-table">
              <thead>
                <tr>
                  <th>Target Name</th>
                  <th>Right Ascension</th>
                  <th>Declination</th>
                  <th>Exposure Time (sec)</th>
                  <th>Filter</th>
                  <th>Timestamp (UTC)</th>
                  <th>Image type</th>
                  <th></th>
                  <th></th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <tbody id="sphere_rows"></tbody>
                </tr>

              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="container">

ボックスには、ターゲット名の選択がクリックされるまでデフォルトのhh：mm：ss.sとdd：mm：ss.sが表示され、その後、フィルター選択が適切に入力されるのを停止せずに、そのオブジェクトのRAとDecが表示されます。。

あいまい

select_sphere関数はすでにここでクラッシュしているため、スクリプトが昇順ボックスと赤緯ボックスに入力する必要があるポイントに到達することはありません。

const header = document.querySelector( '#sphere_name' );

このIDに一致するHTML要素がありません。

さて、あるとしましょう、それは次の行をクラッシュさせます：

const ascension = document.querySelector( '#right_ascension' );

一致する入力フィールドのIDは、＃right_ascensionではなく#right_ascentionです。

これらの2つのバグを修正しても、もう一度クラッシュします。

ascension.innerText = sphere.ascention;

オブジェクト球にはキーアセンションがありません。それはright_ascensionです。

さらに、入力ボックスに一意の名前を付け、querySelectorの代わりにdocument.getElementById（）を使用してその名前への参照を取得することをお勧めします。だから正しい上昇の場合

<input id="right_ascention_input" type="text" placeholder="HH:MM:SS.S" name="ascension" class="form-control" aria-required="true" aria-invalid="false">

そして、使用してそれをpupulate .VALUE代わりのプロパティ.innerTextを。

ここを見てください：

const celestial_spheres = [{
    "id": 134578521,
    "name": "M15",
    "right_ascension": "21:29:58.33",
    "declination": "+12:10:01.2",
    "filters": [{
        "name": "Red (R)",
        "values": ['M15', "21:29:58.33", "+12:10:01.2", 'N/A', 'Red (R)', '<p id="datetime">', '<a href="//www.faulkes-telescope.com/wp-content/uploads/M15-Red.jpeg" target="_blank">M15 Red (R)</a>']
      },
      {
        "name": "Green (V)",
        "values": ['M15', "21:29:58.33", "+12:10:01.2", 'N/A', 'Green (V)', '<p id="datetime">', '<a href="//www.faulkes-telescope.com/wp-content/uploads/M15-green.jpeg" target="_blank">M15 Green (V)</a>']
      },
      {
        "name": "Blue (B)",
        "values": ['M15', "21:29:58.33", "+12:10:01.2", 'N/A', 'Blue (B)', '<p id="datetime">', '<a href="//www.faulkes-telescope.com/wp-content/uploads/M15-Blue.jpeg" target="_blank">M15 Blue (B)</a>']
      }
    ]
  },
  {
    "id": 21412155,
    "name": "M27",
    "ascension": "19:59:36.34",
    "declination": "+22:43:16.09",
    "filters": [{
        "name": "Red (R)",
        "values": ['M27', "19:59:36.34", "+22:43:16.09", 'N/A', 'Red (R)', '<p id="datetime">', '<a href="//www.faulkes-telescope.com/wp-content/uploads/M27-Red.jpeg" target="_blank">M27 Red (R)</a>']
      },
      {
        "name": "Green (V)",
        "values": ['M27', "19:59:36.34", "+22:43:16.09", 'N/A', 'Green (V)', '<p id="datetime">', '<a href="//www.faulkes-telescope.com/wp-content/uploads/M27-Green.jpeg" target="_blank">M27 Green (V)</a>']
      },
      {
        "name": "Blue (B)",
        "values": ['M27', "19:59:36.34", "+22:43:16.09", 'N/A', 'Blue (B)', '<p id="datetime">', '<a href="//www.faulkes-telescope.com/wp-content/uploads/M27-Blue.jpeg" target="_blank">M27 Blue (B)</a>']
      }
    ]
  },
  {
    "id": 452456321347564364,
    "name": "NGC891",
    "ascension": "02:22:33.4",
    "ra": "02:22:33.4",
    "declination": "+42:20:57.0",
    "dec": "+42:20:57.0",
    "filters": [{
        "name": "Red (R)",
        "values": ['NGC891', "02:22:33.4", "+42:20:57.0", 'N/A', 'Red (R)', '<p id="datetime">', '<a href="//www.faulkes-telescope.com/wp-content/uploads/NGC891-Red.jpeg" target="_blank">NGC891 Red (R)</a>']
      },
      {
        "name": "Green (V)",
        "values": ['NGC891', "02:22:33.4", "+42:20:57.0", 'N/A', 'Green (V)', '<p id="datetime">', '<a href="//www.faulkes-telescope.com/wp-content/uploads/NGC891-Green.jpeg" target="_blank">NGC891 Green (V) (R)</a>']
      },
      {
        "name": "Blue (B)",
        "values": ['NGC891', "02:22:33.4", "+42:20:57.0", 'N/A', 'Blue (B)', '<p id="datetime">', '<a href="//www.faulkes-telescope.com/wp-content/uploads/NGC891-Blue.jpeg" target="_blank">NGC891 Blue (B)</a>']
      }
    ]
  }
];
const sphere_options = spheres => spheres.map(sphere => `<option value="${ sphere.id }">${ sphere.name }</option>`).join('');
const filter_options = filters => filters.map(filter => `<option value="${ filter.name }">${ filter.name }</option>`).join('');
const sphere_filter_row = (id, filter) => {
  const cells = filter.values.map(value => `<td>${ value }</td>`).join('');
  return `<tr id="sphere_${ id }" data-type="${ filter.name }">${ cells}</tr>`;
};


const select_sphere = event => {

  const sphere_id = parseInt(event.target.value, 10);
  const sphere = celestial_spheres.find(sphere => sphere.id === sphere_id);
  if (!sphere) throw new Error(`application.select_sphere - cannot find the sphere with id ${ sphere_id }`);
  else {
    const filter_selection = document.querySelector('#sphere_filters');
    const filters = filter_options(sphere.filters);
    filter_selection.innerHTML = `<option value="default">Please select a filter...</option>${ filters }`;
    // const header = document.querySelector( '#sphere_name' );
    //  header.innerHTML = sphere.name;
    const ascension = document.getElementById('right_ascention_input');
    ascension.value = sphere.right_ascension;
    const declination = document.getElementById('declination_input');
    declination.value = sphere.declination;
    const sphere_rows = document.querySelector('#sphere_rows');
    sphere_rows.innerHTML = '';
  }
};

const select_filter = event => {
  const sphere_id = parseInt(document.querySelector('#celestial_spheres').value, 10);
  const sphere = celestial_spheres.find(sphere => sphere.id === sphere_id);
  const filter_name = event.target.value;
  const filter = sphere.filters.find(filter => filter.name === filter_name);
  const row = sphere_filter_row(sphere_id, filter);
  const sphere_rows = document.querySelector('#sphere_rows');
  sphere_rows.innerHTML = row;
};

const show_detail = event => {
  const row = event.target.closest('tr');
  const sphere_id = parseInt(row.getAttribute('id').slice(7), 10);
  const sphere = celestial_spheres.find(sphere => sphere.id === sphere_id);
  alert(`You clicked the value "${ event.target.innerText }" of sphere "${ sphere_id }".`);
  // Do stuff with the clicked cell
};


const sphere_selection = document.querySelector('#celestial_spheres');
sphere_selection.innerHTML += sphere_options(celestial_spheres);
sphere_selection.addEventListener('change', select_sphere);
const filter_selection = document.querySelector('#sphere_filters');
filter_selection.addEventListener('click', select_filter);
const sphere_rows = document.querySelector('#sphere_rows');
sphere_rows.addEventListener('click', show_detail);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group">
  <div class="row">
    <div class="col"><label for="target-list" title="Select the celestial opject you wish to see">Target Name:</label></div>
  </div>
  <select id="celestial_spheres" type="select" name="name" class="button form-control" aria-required="true" aria-invalid="false">
    <option value="default">Select a Target...</option>
  </select>
  <div class="alert alert-danger" style="display: none;"></div>
</div>
<div class="form-group"><label title="The distance of a point east of the First Point of Aries, measured along the celestial equator and expressed in hours, minutes, and seconds.">Right Ascention:</label>
  <span id="right_ascention"></span>
  <input id="right_ascention_input" type="text" placeholder="HH:MM:SS.S" name="ascension" class="form-control" aria-required="true" aria-invalid="false">
  <div class="form-group"><label title="The angular distance of a point north or south of the celestial equator">Declination:</label>
    <span id="declination"></span>
    <input id="declination_input" type="text" placeholder="DD:MM:SS.S" name="#declination" id="#declination" class="form-control" aria-required="true" aria-invalid="false"></div>
</div>

<div><label class="wrapper" for="states" title="Select whether you'd like to use the Red, Blue or Green filter for your image">Filter</label>
  <select id="sphere_filters" type="select" name="name" placeholder="Target Name..." class="button form-control" aria-required="true" aria-invalid="false">
    <option value="default">Select a Filter...</option>
  </select>
</div>

<div class="form-group"> </div>
<div class="form-group"><label title="How long would you like the camera to image the object, disabled in simulation mode">Exposure Time:</label> <input name="exposureSeconds" type="number" id="exposure-time-input" placeholder="N/A" class="form-control" aria-required="true"
    aria-invalid="false">
  <div class="alert alert-danger" style="display: none;"></div>
</div>
</form>
<div class="total-time-text">&nbsp;</div>
<div data-toggle="tooltip" title="" data-placement="right" class="tooltip-wrapper ">

  <button onClick="getElementById()" type="button" class="btn btn-success btn-block">
              Go!
            </button></div>
<div class="container">
  <div class="col-md-12"><br> <br>
    <div>
      <div class="row">
        <div class="col">
          <div class="row">
            <div class="col">
              <!---->
            </div>
          </div>
          <div class="row">
            <div class="col">
              <div class="table-caption mb-1">Session Images</div>
            </div>
            <div class="col-auto"><a href="https://archive.lco.global/?PROPID=FTPEPO2017AB-002&amp;SITEID=coj&amp;TELID=0m4a&amp;start=2019-01-09%2010:15&amp;end=2019-01-09%2010:45" target="_blank">LCO Science Archive (this session's images)</a></div>
          </div>
          <div style="height: 300px; overflow: auto;">


            <table id="session-table">
              <thead>
                <tr>
                  <th>Target Name</th>
                  <th>Right Ascension</th>
                  <th>Declination</th>
                  <th>Exposure Time (sec)</th>
                  <th>Filter</th>
                  <th>Timestamp (UTC)</th>
                  <th>Image type</th>
                  <th></th>
                  <th></th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <tbody id="sphere_rows"></tbody>
                </tr>

              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="container">

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集2021-06-11

コメントを追加

サインイン

分類Dev

Related 関連記事

記事

JavaScript配列から複数の入力を同時に入力する

JavaScript配列から複数の入力を同時に入力する

配列の入力から複数の回答を選択する

複数の入力を同時に検証する

入力が同じ値（複数の条件）であるかどうかを確認しますjavascript配列

Pythonで複数の入力を同時に挿入するにはどうすればよいですか？

配列に複数の入力を追加する

ng-repeat の複数の入力からの値を AngularJS で配列にプッシュする

std :: cinが同時に複数の入力を受け入れるのはなぜですか？

複数の入力パスからデータフレームを読み取り、同時に列を追加する

Javaの1つの入力プロンプトから配列に複数の値を入れる方法は？

複数の入力から状態配列にデータをプッシュする

jQueryは、同じクラスの複数の入力からリアルタイム配列を作成します

入力を使用して配列値から複数の行を挿入する方法

MATLABの配列からの値を行列に入力する

javascriptのループから整数を配列に入力する方法

複数のテキスト入力を同時に大文字に変換する

複数の HTML テキスト入力を同時に編集する

関数に同じ文字列を複数回入力する

配列に数値を入力する

htmlにjavascript配列を入力する

PHP配列から配列に値を入力する方法

PHPで複数の変数を配列に入力する方法は？

複数の文字列を収集して配列に入力する方法

awkは複数の入力ファイルを同時に読み取ることができますか？

同じ行から複数の入力を取得するにはどうすればよいですか？

関数の配列に配列を入力する方法

同じ名前の複数の入力から値を取得する方法入力フィールドはjQueryを使用して動的に作成されますか？

1つのループから複数のアイテムを抽出し、複数の列に入力する方法

複数の入力を配列に格納します

配列を使用して1つの入力から複数の値を出力する方法は？