Populating multiple inputs simultaneously from JavaScript array

Question

I am trying to populate the right ascension and declination boxes with the values of the option selected in the Target name select box, but have had no success yet, how do I do it?

The script does everything else I want including populating the next drop down and subsequently populating the table at the bottom, but I cant get the Right Ascension and Declination boxes to populate.

I've searched through tutorials and other answered questions on here, but have not found anything that has helped yet.

 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"> 

The boxes should show the default hh:mm:ss.s and dd:mm:ss.s until the Target name select is clicked on, and then show the RA and Dec of that object, while not stopping the filter select from properly populating.

Answer 1

Your script won't ever come to the point where it should populate the ascention and declination boxes because the select_sphere function already crashes here:

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

You have no HTML element which matches this id.

Well, let's say there is, it will crash the next line:

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

The matching input field's ID is #right_ascention not #right_ascension.

Even if you fix those two bugs it will crash one more time:

ascension.innerText = sphere.ascention;

the object sphere does not have a key ascention . It's right_ascension .

Furthermore I'd recommend giving your input boxes an unique name and get a reference to it using document.getElementById() instead of querySelector . So in case of the right ascention

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

and pupulate it using the .value property instead of .innerText .

Have a look here:

 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">