js domから要素を取得して、必要な値のみ取得する

複数のradioボタンから情報を抜き出し、どこが選択されているかを調べる処理を行う。

radioボタンから、必要なvalueのみを取得する。
この時3パターンできることに気がつき書いてみた。

1はforeachで回す
2はfilterで取得する
3はfor of で回す

A<input id="text1" name="sample" type="radio" value="https://media/1">
B<input id="text2" name="sample" type="radio" value="https://media/2">
C<input id="text3" name="sample" type="radio" value="https://media/3">
<input id="btn" type="button" value="test" onClick="sample()">

let sample = function(){
  let link_ids = document.getElementsByName('sample');
  //#sample1
   link_ids.forEach(element => {
     if (element.checked == true){
         location.href = element.value
          //radioボタンが選択されているurlに飛ぶ
     }
   });

  //#sample2
   let array_ids = Array.from(link_ids)
   let data = array_ids.filter(link => link.checked == true)
    for (let i of data){
        if (i.checked){
            location.href = i.value
        }
    }

  //#sample3
  for (let i of link_ids){
    if(i.checked){
      location.href = i.value
    }
  }

  //sample4
  let data = document.querySelector('input[name=mytext]:checked');
    if(d !== null) {
       location.href = d.value;
    }

radioボタンの要素を取得すればnodelistとして取得できる。
link_idsは[object NodeList]として扱われる。
その時、foreachで回すことが可能

filterを使う際にはArrayに一度変換しなければならないようです。
filterは配列限定みたいですね。

for ofであれば、nodelistも回すことができるようです。

filterのみ、純正なarray(配列)しか回せないことが判明し勉強になりました。。。

追記

sample4では、選択されたradioのみを取得

  //豆知識
  let toString = Object.prototype.toString;
  console.log(toString.call(link_ids))
  //valueの型を調べてくれる link_idsは"[object NodeList]"
  //配列は"[object Array]"

  let ele = Array.from(link_ids)
  //配列に変換 objectがNodelistの場合にも可能

参考資料：

nodelist foreach
https://developer.mozilla.org/ja/docs/Web/API/NodeList/forEach
filter
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/filter
型確認
https://techacademy.jp/magazine/35968
配列に変換
https://lab.syncer.jp/Web/JavaScript/Snippet/53/