見出し画像

JavaScript DOM操作　ラジオボタンをクリックしてliに追加する方法！

WebLife


今回はJavaScriptのDOM操作でラジオボタンをクリックしてliに追加する方法を解説します！

たとえば以下の図があります。

スクリーンショット 2021-07-18 13.59.58

このラジオボタンのいずれかを選択し、ボタンをクリックすると以下の図のようになる仕組みを作る方法を解説していきますので最後まで御覧ください。

スクリーンショット 2021-07-18 14.03.15


それではHTMLとJavaScriptのコードを記述します。

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
 <meta charset="utf-8">
 <title>JavaScript DOM</title>
 
</head>
<body>
 <input type="radio" name="color" value="html"> HTML
 <input type="radio" name="color" value="css"> CSS
 <input type="radio" name="color" value="javascript"> JavaScript
 <button>ボタン</button>

 <ul>
 </ul>
 

 <script src="js/main.js"></script>
</body>
</html>

JavaScript

document.querySelector("button").addEventListener("click", () => {
  const languages = document.querySelectorAll("input");
  let selectedLanguage;

  languages.forEach(language => {
    if(language.checked === true) {
     selectedLanguage = language.value;
    }
  });

  const liNode = document.createElement("li");
  liNode.textContent =  selectedLanguage;
  document.querySelector("ul").appendChild(liNode);
});


JavaScriptの解説

ここからは上記のJavaScriptの記述を上から順に解説していきます。

document.querySelector("button").addEventListener("click", () => {
  
  });

document.querySelector("button").addEventListener("click", () => {　});はボタンをクリックしたときの処理を行う記述です。

document(html)内を探してquerySelector("button")でhtmlのbuttonタグを選んできます。
※　()内は文字列で記述する。

addEventListener("click", ()=> {　//この中にクリックしたあとの処理を記述します。});はイベントに合わせて実行させる関数で、第1引数にイベント名を記述し、第2引数に関数を記述します。

今回の場合はイベント名にクリックしたあとを実行したいので、イベント名には"click"を記述します。タブルクォーテーションかシングルクォーテーションで囲んでくださいね。

クリック以外のイベントにはマウスホバーやキーボード入力など、さまざまあります。

第2引数の関数は記述の短いアロー関数で記述します。関数名がないのはクリックしたら関数を呼び出すことができるので関数名はありません。


クリックしたときの処理内容

それでは次にクリックしたときの動作を解説していきます。

const languages = document.querySelectorAll("input");

languagesという定数にdocument.querySelectorAll("input")を代入します。そのほうが、document.querySelectorAll("input")を記述する手間がなくなるからです。

document.querySelectorAll("input")はdocument(html)内のinputタグを選んできてね。という意味で、inputタグは一つではないので、querySelectorAllのAllを付けてすべてのinputタグを選んできます。


let selectedLanguage;

ここでlet selectedLanguage;を記述するのはスコープの関係もあるし、あとからselectedLanguage変数の値を変更するため、変数宣言だけを行います。
※スコープとは領域のことで｛｝の間で使えます。

constはあとから値をへんこうできないので、letにしています。
ちなみにconstは必ず初期化といって、const selctedLanguage =  hogeのように定数に値を代入することをいいます。


forEachを使って3つのinputタグを取得する。

languages.forEach(language => {
    if(language.checked === true) {
     selectedLanguage = language.value;
    }
  });

languages.forEach(language => {　};をつかって3つのinputタグを取得します。

forEachの第1引数のlanguageにはinputタグの値が入ります。

定数languagesの中は配列のようになっていて、console.log(languages);で見ると[input, input, input]になっているのがわかりますよ。


forEachの関数の中はif関数を使います。

if(language.checked === true) {　｝

if(language.checked === true) {　}はinputタグの値にチェックが入っていたらという意味です。

checked属性はinput要素のcheckbox型とradio型で使われる属性で、チェックの状態を取得したり変更することができます。
checked属性に格納されている値はBoolean型とよばれ、trueとfalseの値が入ります。 

selectedLanguage = language.value;

selectedLanguage = language.value;はチェックが入っているinputタグを先程の変数selectedLanguageに代入してあげます。


ここまでがボタンをクリックをしたらチェックが入っているinputタグを呼び出してくださいということが記述されています。


親nodeのulに子nodeのliを追加する

ここからはチェックが入っているinputタグをulタグの中にliタグを作って表示させることを解説していきます。​

const liNode = document.createElement("li");

const liNode = document.createElement("li");これはliタグを作成し、定数liNodeに代入しています。

createElement("li")はliタグを生み出すメソッドで、（）内は文字列で記述します。

liNode.textContent =  selectedLanguage;

liNode.textContent = selectedLanguage;は新しく作ったliのテキスト内容を決めます。

textContentプロパティはテキスト情報を取得・設定するために使います。

今回のliNode.textContentにはselectedLanguageに格納されている内容が入ります。

document.querySelector("ul").appendChild(liNode);

document.querySelector("ul").appendChild(liNode);は新しく作ったliノードを親要素であるulノードの追加します。

document(html)内にあるquerySelector("ul")ulタグを選んでappendChild(liNode);で先程新しく作ったliノードを子要素の最後に追加します。

appendChild(liNode)は子要素の最後に追加するという意味で、()内は定数なのでダブルクォーテーションまたは、シングルクォーテーションは要りません。


以上で終了になります。

最後までご覧いただきありがとうございました。


いいなと思ったら応援しよう！