同时从JavaScript数组填充多个输入

Question

我正在尝试使用在“目标名称”选择框中选择的选项的值填充正确的升序和纬度框，但是还没有成功，怎么办？

该脚本可以执行我想做的所有其他事情，包括填充下一个下拉列表，然后填充底部的表格，但是我无法填充“右上扬和赤纬”框。

我已经在此处搜索了教程和其他已回答的问题，但是还没有找到任何有用的东西。

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，同时不停止过滤器选择从正确填充。

Answer 1

您的脚本永远不会到达应该填充上升和下降框的位置，因为select_sphere函数已经在此处崩溃：

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

您没有与该ID匹配的HTML元素。

好吧，假设有，它将使下一行崩溃：

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

匹配的输入字段的ID是#right_ascention而非#right_ascension。

即使您修复了这两个错误，它也会再次崩溃：

ascension.innerText = sphere.ascention;

对象球形没有关键 ascent 。这是 right_ascension 。

此外，我建议给您的输入框一个唯一的名称，并使用 document.getElementById（）而不是 querySelector 对其进行引用。所以在正确的情况下

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

并使用 .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">