詳しい人求む！

JavaScriptでの、HTML内に表示しているボタンをクリックでイベント実行する方法

締切済

質問者：programanman
質問日時：2022/01/18 18:43
回答数：1件

現在HTML&CSS、JavaScriptでの構築を行っているのですが、HTML内にボタンを表示して、クリックしてからJavaScriptを実行させたいと考えています。ですが、ボタンクリックの関数などはわかってはいても、どこに書けばいいのかわからず困っています。以下のコード内にボタンをクリックすることでイベント実行できるようなコードの書き方を教えてください。よろしくお願いします。

※このコード内での実装を考えています。

<!DOCTYPE HTML>
<html lang="ja">
<head><title>Sample</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style>
#selects select { width:9em; margin-right:1em; }
</style>
</head>
<body>

<div id="selects"></div>
<div><ol id="result"></ol></div>

<script>
{
const placeData = [
{ title: '市', item: [
{name:'A市', location:[
{ lat:0, lng:0, subname:'物件1', image:'a.jpg'},
{ lat:100, lng:30, subname:'物件2', image:'b.jpg'}
]},
{name:'B市', location:[
{ lat:0, lng:70, subname:'物件4', image:'d.jpg'},
{ lat:100, lng:100, subname:'物件5', image:'e.jpg'}
]}
]},
{ title: 'スパ', item: [
{name:'スパ1', location:{ lat:10, lng:10}},
{name:'スパ2', location:{ lat:90, lng:90}}
]},
{ title: 'コンビニ', item: [
{name:'コンビニ1', location:{ lat:20, lng:10}},
{name:'コンビニ2', location:{ lat:80, lng:90}}
]},
{ title: '病院', item: [
{name:'病院1', location:{ lat:30, lng:20}},
{name:'病院2', location:{ lat:70, lng:80}}
]}
];

const
selects = [],
wrap = document.getElementById('selects'),
result = document.getElementById('result'),
Checker = () => !selects.some( e => e.selectedIndex == 0 ),
Clear = () => { result.innerHTML = ''; },
Distance = (p, q) => Math.sqrt(Math.pow(p.lat-q.lat,2)+Math.pow(p.lng-q.lng,2)),
SumDist = (p, a) => a.map( e => Distance(p, e)).reduce((s, e) => s + e, 0),

CalcList = () => {
const ps = selects.map((e, i) => placeData[i].item[e.selectedIndex-1].location);
const p = ps.shift();
return p.map( e => [ SumDist(e, ps), e ] );
},

DispList = () => {
const list = CalcList();
list.sort( (a, b) => a[0] - b[0] );
for(let i=0; i<Math.min(list.length, 3); i++){
const html = `<li>${list[i][1].subname} <img src="${list[i][1].image}" />
　<small> (${list[i][0].toFixed(2)})</small></li>`;
result.insertAdjacentHTML('beforeend', html);
}
},

Initialize = () => {
for (let p, i = 0; p = placeData[i++];) {
let html = `<select><option value="">--${p.title}を選択--</option>`;
p.item.forEach((d, j) =>{
html += `<option value="${j}">${d.name}</option>`;
});
wrap.insertAdjacentHTML('beforeend', html + '</select>');
selects.push(wrap.lastElementChild);
}
};

Initialize();
wrap.addEventListener( 'change', e =>{ Clear(); if (Checker()) DispList(); });
}
</script>
</body>
</html>