【javascript】手軽に選択肢を追加！createselectbox関数の活用術の編集リクエスト
@@ -10,17 +10,17 @@
createselectbox関数は、javascriptで選択肢を作成し追加するための関数です。基本的な使い方は非常に簡単で、以下のように使います。
```javascript
function createselectbox(options) {
- const selectbox = document.createelement('select');
+ const selectbox = document.createElement('select');
- options.foreach((option) => {
- const opt = document.createelement('option');
+ options.forEach((option) => {
+ const opt = document.createElement('option');
opt.value = option.value;
opt.text = option.text;
- selectbox.appendchild(opt);
+ selectbox.appendChild(opt);
});
return selectbox;
}
@@ -30,11 +30,11 @@
{ value: 'option3', text: '選択肢3' }
];
const selectbox = createselectbox(options);
-document.body.appendchild(selectbox);
+document.body.appendChild(selectbox);
```
この例では、createselectbox関数にオプションの配列を渡し、選択肢を作成します。その後、作成した選択肢をbody要素に追加します。これによって、html上に選択肢が表示されます。
## 静的な選択肢の追加方法と表示のカスタマイズ
@@ -47,12 +47,12 @@
{ value: 'option2', text: '静的な選択肢2' },
{ value: 'option3', text: '静的な選択肢3' }
];
const staticselectbox = createselectbox(staticoptions);
-staticselectbox.classlist.add('static');
-document.body.appendchild(staticselectbox);
+staticselectbox.classList.add('static');
+document.body.appendChild(staticselectbox);
```
この例では、静的な選択肢を追加し、select要素に対してクラス名(static)を追加しています。それによって、cssを利用して表示をカスタマイズすることができます。詳しいカスタマイズの方法は、cssの知識が必要ですが、基本的なスタイル指定方法については、以下のurlを参考にすることができます。
- [cssの基本的なスタイル指定方法](https://www.sejuku.net/blog/25350)
@@ -61,28 +61,28 @@
createselectbox関数は、動的な選択肢の追加や削除にも対応しています。以下の例では、ボタンをクリックすることで選択肢を追加し、選択肢の削除も可能にしています。
```javascript
const dynamicselectbox = createselectbox([]);
-const addbutton = document.createelement('button');
-addbutton.textcontent = '追加';
+const addbutton = document.createElement('button');
+addbutton.textContent = '追加';
-addbutton.addeventlistener('click', () => {
+addbutton.addEventListener('click', () => {
const dynamicoption = { value: 'dynamic', text: '動的な選択肢' };
- dynamicselectbox.appendchild(createselectbox([dynamicoption]));
+ dynamicselectbox.appendChild(createselectbox([dynamicoption]));
});
-const removebutton = document.createelement('button');
-removebutton.textcontent = '削除';
+const removebutton = document.createElement('button');
+removebutton.textContent = '削除';
-removebutton.addeventlistener('click', () => {
- dynamicselectbox.removechild(dynamicselectbox.lastchild);
+removebutton.addEventListener('click', () => {
+ dynamicselectbox.removeChild(dynamicselectbox.lastChild);
});
-document.body.appendchild(dynamicselectbox);
-document.body.appendchild(addbutton);
-document.body.appendchild(removebutton);
+document.body.appendChild(dynamicselectbox);
+document.body.appendChild(addbutton);
+document.body.appendChild(removebutton);
```
この例では、ボタンをクリックすることで動的な選択肢を追加したり削除したりすることができます。追加の際には、動的な選択肢のオブジェクトを作成し、createselectbox関数を用いてselect要素を作成します。削除の際には、select要素の最後の子要素を取得して削除します。
## api連携による選択肢の自動取得と更新方法
@@ -95,24 +95,24 @@
.then((response) => response.json());
}
async function updateoptions() {
const options = await fetchoptions();
- const selectbox = document.queryselector('.api');
+ const selectbox = document.querySelector('.api');
selectbox.innerhtml = '';
- options.foreach((option) => {
- selectbox.appendchild(createselectbox([option]));
+ options.forEach((option) => {
+ selectbox.appendChild(createselectbox([option]));
});
}
// 初回の選択肢取得
updateoptions();
// 10秒ごとに選択肢を更新
-setinterval(() => {
+setInterval(() => {
updateoptions();
}, 10000);
```
この例では、fetchoptions関数を用いて外部apiから選択肢のデータを取得します。取得したデータを元に選択肢を作成し、選択肢を更新するためのupdateoptions関数を定義しています。初回の選択肢取得は、updateoptions関数を呼び出して行います。その後、setinterval関数を用いて10秒ごとにupdateoptions関数を呼び出し、選択肢を自動的に更新します。
@@ -157,12 +157,12 @@
<button onclick="validate()">送信</button>
<script>
function validate() {
- const selectbox = document.getelementbyid('selectbox');
- const errormessage = document.getelementbyid('selectbox-error');
+ const selectbox = document.getElementById('selectbox');
+ const errormessage = document.getElementById('selectbox-error');
if (selectbox.value === '') {
errormessage.style.display = 'block';
} else {
errormessage.style.display = 'none';
