JavaScriptの.addEventListener()のchangeでラジオボタンをクリックで要素のソート

selectElement.addEventListener('change', (event) => {
 // ここに処理内容
});

<form name="formSort" id="form">
<label><input class="inputRadio" type="radio" name="formSortbtn" value="newDate" checked>日付けが新しい順
</label>
<label><input class="inputRadio" type="radio" name="formSortbtn" value="OldDate">日付けが古い順</label>
<label><input class="inputRadio" type="radio" name="formSortbtn" value="bigScore">数字が大きい順</label>
<label><input class="inputRadio" type="radio" name="formSortbtn" value="smallScore">数字が小さい順</label>
</form>

<!-- ここからリスト -->
<ul id="sampleList">
  <li>
    <p>リスト1 <span class="score">355</span><span class="date">2022年10月10日</span></p>
    </p>
  </li>
  <li>
    <p>リスト2 <span class="score">280</span><span class="date">2022年12月08日</span></p>
    </p>
  </li>
  <li>
    <p>リスト3 <span class="score">40</span><span class="date">2021年04月02日</span></p>
    </p>
  </li>
  <li>
    <p>リスト4 <span class="score">320</span><span class="date">2020年09月01日</span></p>
    </p>
  </li>
  <li>
    <p>リスト5 <span class="score">1020</span><span class="date">2019年01月28日</span></p>
    </p>
  </li>
</ul>
<!-- ここまでリスト -->

// フォームを取得
const selectElement = document.querySelector('#form');

// フォーム内に変更が加わった時の処理
selectElement.addEventListener('change', (event) => {
console.log('選択が変更されました');

// フォーム内のラジオボタンを取得。checked でチェックがついた時。
var rcheck1 = document.formSort.formSortbtn[0].checked;
var rcheck2 = document.formSort.formSortbtn[1].checked;
var rcheck3 = document.formSort.formSortbtn[2].checked;
var rcheck4 = document.formSort.formSortbtn[3].checked;

// チェックがついた時の条件分岐
// 1
if (rcheck1) { //日付け新しい
		console.log('日付けが新しい順');
// リストの取得
var container = document.querySelector('#sampleList');
[].slice.call(container.querySelectorAll('li'))
    .map(function(v){
       // .date の要素を取得する
        var value = v.querySelector('.date').innerHTML.replace(/<.+>/,'').replace(/\D/g,'') - 0;
        return { dom: v, value: value };
    })
    // sortをかける
    .sort(function(a,b){ return b.value - a.value; })
    .forEach(function(v){ container.appendChild(v.dom); });
	} else if(rcheck2) { //日付けが古い順
		console.log('日付けが古い順');
var container = document.querySelector('#sampleList');
[].slice.call(container.querySelectorAll('li'))
    .map(function(v){
        var value = v.querySelector('.date').innerHTML.replace(/<.+>/,'').replace(/\D/g,'') - 0;
        return { dom: v, value: value };
    })
    .sort(function(a,b){ return a.value - b.value; })
    .forEach(function(v){ container.appendChild(v.dom); });
	} else if(rcheck3) { //falseの場合
		console.log('数字が大きい順');
var container = document.querySelector('#sampleList');
[].slice.call(container.querySelectorAll('li'))
    .map(function(v){
        var value = v.querySelector('.score').innerHTML.replace(/<.+>/,'').replace(/\D/g,'') - 0;
        return { dom: v, value: value };
    })
    .sort(function(a,b){ return b.value - a.value; })
    .forEach(function(v){ container.appendChild(v.dom); });
	}  else { //falseの場合
		console.log('数字が小さい順');
var container = document.querySelector('#sampleList');
[].slice.call(container.querySelectorAll('li'))
    .map(function(v){
        var value = v.querySelector('.score').innerHTML.replace(/<.+>/,'').replace(/\D/g,'') - 0;
        return { dom: v, value: value };
    })
    .sort(function(a,b){ return a.value - b.value; })
    .forEach(function(v){ container.appendChild(v.dom); });
	}
});

form#form {
    display: flex;
    justify-content: center;
    gap: 5px 25px;
    padding: 10px 10px 9px;
    font-size: 0.9rem;
    border-radius: 3px;
    background: #FFF;
    filter: drop-shadow(0px 1px 2px #eee);
    position: relative;
    margin-bottom: 25px;
    flex-wrap: wrap;
}
form#form:after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -12px;
    border: 12px solid transparent;
    border-top: 12px solid #FFF;
}
form#form label {
    display: inline-flex;
    justify-content: flex-start;
    align-items: center;
    gap: 5px;
    cursor: pointer;
}
form#form label input {
    display: inline-flex;
    justify-content: flex-start;
    transform: scale(1.3) translateY(-1px);
    cursor: pointer;
}
ul#sampleList {
    list-style: none;
    padding: 20px 25px;
    background: #FFF;
    border: none;
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin: 0;
}
ul#sampleList li {
    margin: 0;
    padding: 0;
}
ul#sampleList li p {
    margin: 0;
    display: flex;
    justify-content: flex-start;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
}
ul#sampleList li p span {
    background: #f0f0f0;
    padding: 5px 14px;
    line-height: 1;
    font-size: 0.9rem;
    position: relative;
    color: #707070;
    border-radius: 3px;
}
span.score:before {
    position: relative;
    content: "\f51e";
    font-family: "Font Awesome 5 Free" !important;
    font-weight: 900;
    opacity: 0.7;
    margin-right: 5px;
    font-size: 0.7rem;
}
span.date:before {
    position: relative;
    content: "\f073";
    font-family: "Font Awesome 5 Free" !important;
    font-weight: 900;
    opacity: 0.7;
    margin-right: 5px;
    font-size: 0.7rem;
    vertical-align: 1px;
}