- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我尝试使用“目标名称”选择框中所选选项的值填充赤经和赤纬框,但尚未成功,该如何操作?
该脚本执行了我想要的所有其他操作,包括填充下一个下拉列表并随后填充底部的表格,但我无法填充赤经和赤纬框。
我已经在这里搜索了教程和其他已回答的问题,但尚未找到任何有帮助的内容。
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"> </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&SITEID=coj&TELID=0m4a&start=2019-01-09%2010:15&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"> </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&SITEID=coj&TELID=0m4a&start=2019-01-09%2010:15&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/
我正在尝试创建一个包含 int[][] 项的数组 即 int version0Indexes[][4] = { {1,2,3,4}, {5,6,7,8} }; int version1Indexes[
我有一个整数数组: private int array[]; 如果我还有一个名为 add 的方法,那么以下有什么区别: public void add(int value) { array[va
当您尝试在 JavaScript 中将一个数组添加到另一个数组时,它会将其转换为一个字符串。通常,当以另一种语言执行此操作时,列表会合并。 JavaScript [1, 2] + [3, 4] = "
根据我正在阅读的教程,如果您想创建一个包含 5 列和 3 行的表格来表示这样的数据... 45 4 34 99 56 3 23 99 43 2 1 1 0 43 67 ...它说你可以使用下
我通常使用 python 编写脚本/程序,但最近开始使用 JavaScript 进行编程,并且在使用数组时遇到了一些问题。 在 python 中,当我创建一个数组并使用 for x in y 时,我得
我有一个这样的数组: temp = [ 'data1', ['data1_a','data1_b'], ['data2_a','data2_b','data2_c'] ]; // 我想使用 toStr
rent_property (table name) id fullName propertyName 1 A House Name1 2 B
这个问题在这里已经有了答案: 关闭13年前。 Possible Duplicate: In C arrays why is this true? a[5] == 5[a] array[index] 和
使用 Excel 2013。经过多年的寻找和适应,我的第一篇文章。 我正在尝试将当前 App 用户(即“John Smith”)与他的电子邮件地址“jsmith@work.com”进行匹配。 使用两个
当仅在一个边距上操作时,apply 似乎不会重新组装 3D 数组。考虑: arr 1),但对我来说仍然很奇怪,如果一个函数返回一个具有尺寸的对象,那么它们基本上会被忽略。 最佳答案 这是一个不太理
我有一个包含 GPS 坐标的 MySQL 数据库。这是我检索坐标的部分 PHP 代码; $sql = "SELECT lat, lon FROM gps_data"; $stmt=$db->query
我需要找到一种方法来执行这个操作,我有一个形状数组 [批量大小, 150, 1] 代表 batch_size 整数序列,每个序列有 150 个元素长,但在每个序列中都有很多添加的零,以使所有序列具有相
我必须通过 url 中的 json 获取文本。 层次结构如下: 对象>数组>对象>数组>对象。 我想用这段代码获取文本。但是我收到错误 :org.json.JSONException: No valu
enter code here- (void)viewDidLoad { NSMutableArray *imageViewArray= [[NSMutableArray alloc] init];
知道如何对二维字符串数组执行修剪操作,例如使用 Java 流 API 进行 3x3 并将其收集回相同维度的 3x3 数组? 重点是避免使用显式的 for 循环。 当前的解决方案只是简单地执行一个 fo
已关闭。此问题需要 debugging details 。目前不接受答案。 编辑问题以包含 desired behavior, a specific problem or error, and the
我有来自 ASP.NET Web 服务的以下 XML 输出: 1710 1711 1712 1713
如果我有一个对象todo作为您状态的一部分,并且该对象包含数组列表,则列表内部有对象,在这些对象内部还有另一个数组listItems。如何更新数组 listItems 中 id 为“poi098”的对
我想将最大长度为 8 的 bool 数组打包成一个字节,通过网络发送它,然后将其解压回 bool 数组。已经在这里尝试了一些解决方案,但没有用。我正在使用单声道。 我制作了 BitArray,然后尝试
我们的数据库中有这个字段指示一周中的每一天的真/假标志,如下所示:'1111110' 我需要将此值转换为 boolean 数组。 为此,我编写了以下代码: char[] freqs = weekday
我是一名优秀的程序员,十分优秀!