男子プログラマーになりたいやつ

未経験から一端のエンジニア目指し日々勉強中です。

JavaScript DOM編 vol.4

<a class="keyword" href="http://d.hatena.ne.jp/keyword/JavaScript">JavaScript</a> DOM編 vol.4 f:id:TomozQ:20201117215135j:plain

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',() => {
    
  })
}

f:id:TomozQ:20201117214513p:plain

まずは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要素のvalueli要素の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要素を追加していきます。

ブラウザは...

f:id:TomozQ:20201117214449g:plain

こんな感じです。


ただ、入力した文字が消えると尚いいですよね。

{
  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する様にしましょう。 f:id:TomozQ:20201117214428g:plain

いい感じですね

ですが

今のままでは空文字も追加されてしまいます。

f:id:TomozQ:20201117214411g:plain

中身が空文字の時には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();
  })
}

こんな感じで条件分岐すればできますね。

f:id:TomozQ:20201117214348g:plain


セレクトボックスの操作

次はセレクトボックスを操作してみましょう。

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',() => {
    
  })
}

ブラウザはこんな感じです。

f:id:TomozQ:20201117214331g:plain

選択された値をリストに追加していきましょう。




まずは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);
  })
}

この処理もさっきと一緒ですね。

f:id:TomozQ:20201117214314g:plain

また、select要素のvalueにはタグの中身が使われますが、別の値にしたい場合にはHTMLで指定することもできます。

<select>
  <option value='tuna'>マグロ</option>
  <option value='mackerel'>サバ</option>
  <option value='banana'>バナナ</option>
</select>

結果は...

f:id:TomozQ:20201117214257g:plain

こうなります。






今回はここまで

次回は・・・まだまだJS!

それではまた次回!