JavaScript input要素の操作・セレクトボックスの操作
JavaScript備忘録 Vol.15
目次
- input要素の操作
- セレクトボックスの操作
今回もJavaScriptの記事になっています。
input要素の操作
ここではinput要素に入力された値をリストに追加していきたいと思います。
index.html
<!DOCTYPE html> <html lang = 'ja'> <head> <meta charset="utf-8"> <title>JavaScript DOMPractice</title> </head> <body> <input type="text"> <button>追加</button> <ul> </ul> <script src='js/main.js'></script> </body> </html>
js/main.js
'use strict' { document.querySelector('button').addEventListener('click',() => { }) }
まずはli要素を作りましょう。
{ document.querySelector('button').addEventListener('click',() => { const li = document.createElement('li') }) }
document.createElement('li')
としてli要素を作ります。
次はinput要素に入力された値を取得します。
{ document.querySelector('button').addEventListener('click',() => { const li = document.createElement('li'); const text = document.querySelector('input'); li.textContent = text.value; }) }
querySelector('input')
としてinput要素を取得しtext
という定数に代入
input要素のvalue
をli
要素のtextに指定します。
あとはul要素にli要素を追加していけばいいですね。
{ document.querySelector('button').addEventListener('click',() => { const li = document.createElement('li'); const text = document.querySelector('input'); li.textContent = text.value; const ul = document.querySelector('ul'); ul.appendChild(li); }) }
ul要素を取得して、ul.appendChild(li)
としてul要素にli要素を追加していきます。
ブラウザは...
こんな感じです。
ただ、入力した文字が消えると尚いいですよね。
{ document.querySelector('button').addEventListener('click',() => { const li = document.createElement('li'); const text = document.querySelector('input'); li.textContent = text.value; const ul = document.querySelector('ul'); ul.appendChild(li); text.value = ''; text.focus(); }) }
text.value
に空文字を入力してあげて、ついでにinputにfocusする様にしましょう。
いい感じですね
ですが
今のままでは空文字も追加されてしまいます。
中身が空文字の時にはulに追加せず、alertを出しましょう。
{ document.querySelector('button').addEventListener('click',() => { const li = document.createElement('li'); const text = document.querySelector('input'); li.textContent = text.value; if(text.value !== ''){ const ul = document.querySelector('ul'); ul.appendChild(li); text.value = ''; }else{ alert('入力してください'); } text.focus(); }) }
こんな感じで条件分岐すればできますね。
セレクトボックスの操作
次はセレクトボックスを操作してみましょう。
index.html
<!DOCTYPE html> <html lang = 'ja'> <head> <meta charset="utf-8"> <title>JavaScript DOMPractice</title> </head> <body> <select> <option>マグロ</option> <option>サバ</option> <option>バナナ</option> </select> <button>追加</button> <ul> </ul> <script src='js/main.js'></script> </body> </html>
js/main.js
'use strict' { document.querySelector('button').addEventListener('click',() => { }) }
ブラウザはこんな感じです。
選択された値をリストに追加していきましょう。
まずはli要素を作っていきます。
{ document.querySelector('button').addEventListener('click',() => { const li = document.createElement('li'); }) }
さっきと同じですね。
次に選択された値を取得しましょう。
{ document.querySelector('button').addEventListener('click',() => { const li = document.createElement('li'); const food = document.querySelector('select'); li.textContent = `${food.value}:${food.selectedIndex}`; }) }
select
要素を取得しfood
という定数に代入
select要素の場合、value
と、selectedIndex
とすることでindex番号
も取得できるので、どちらも表示してみます。
あとはこれをul要素に追加していきましょう。
{ document.querySelector('button').addEventListener('click',() => { const li = document.createElement('li'); const food = document.querySelector('select'); li.textContent = `${food.value}:${food.selectedIndex}`; const ul = document.querySelector('ul'); ul.appendChild(li); }) }
この処理もさっきと一緒ですね。
また、select要素のvalueにはタグの中身が使われますが、別の値にしたい場合にはHTMLで指定することもできます。
<select> <option value='tuna'>マグロ</option> <option value='mackerel'>サバ</option> <option value='banana'>バナナ</option> </select>
結果は...
こうなります。
今回はここまで
次回は・・・まだまだJS!
それではまた次回!