gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-02 23:22:44 25 4
gpt4 key购买 nike

我尝试使用“目标名称”选择框中所选选项的值填充赤经和赤纬框,但尚未成功,该如何操作?

该脚本执行了我想要的所有其他操作,包括填充下一个下拉列表并随后填充底部的表格,但我无法填充赤经和赤纬框。

我已经在这里搜索了教程和其他已回答的问题,但尚未找到任何有帮助的内容。

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_ascention 而不是 #right_ascension。

即使你修复了这两个错误,它也会再次崩溃:

ascension.innerText = sphere.ascention;

对象球体没有关键上升。这是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">

关于javascript - 从 JavaScript 数组同时填充多个输入,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56874763/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com