javascript スライダーについて

https://code-kitchen.dev/html/input-range/
前回の質問の続きになってしまうのですが、上のサイトを参考に
-----html-----

<input type="range" id="example" min="1" max="5" step="1">

<p>2つのペアの画像は相性が<span id="current-value"></span>です。</p>

----javascript-----

window.onload = () => {
const
inputElem = document.getElementById('example'),
currentValueElem = document.getElementById('current-value'),
setCurrentValue = (val) => {currentValueElem.innerText = val;},

rangeOnChange = (e) =>{setCurrentValue(e.target.value);};

inputElem.addEventListener('input', rangeOnChange);
setCurrentValue(inputElem.value);
}


となった時にhtmlの<span id="current-value"></span>の部分を数字ではなく言葉を入れたいときはjavascriptでvalをいじればいいのでしょか？

自分で試したのはletで新しい変数aisyoを作って、ｊｓの5行目のvalを新しい変数aisyoに変えて
if文でvalの数がこれならaisyoはこの文字列を代入するってやったんですが動かなかったです

No.1 ベストアンサー 回答者： sukitaro 回答日時： 2021/10/19 17:04

5行目のvalは、

その次の行のe.target.valueからきているので、
取りうる値は、'1','2','3','4','5'のいずれかです。

なので、変数aisyoは、この5つに対して値を定義すればよいです。

具体的には、以下の通りにすればよいと思います。

window.onload = () => {
const
aisyo = {
'1': '★☆☆☆☆ とても悪い',
'2': '★★☆☆☆ ちょっと悪い',
'3': '★★★☆☆ 普通',
'4': '★★★★☆ ちょっと良い',
'5': '★★★★★ とても良い'
},
inputElem = document.getElementById('example'),
currentValueElem = document.getElementById('current-value'),
setCurrentValue = (val) => {currentValueElem.innerText = aisyo[val];},

rangeOnChange = (e) =>{setCurrentValue(e.target.value);};

inputElem.addEventListener('input', rangeOnChange);
setCurrentValue(inputElem.value);
}

さらにこのaisyoを、普通の配列で作り直してみると、
もっとスマートになると思います。

この回答へのお礼

aisyo[val]こういった書き方をするんですね
普通の配列で作るのも試しててみようと思います

お礼日時：2021/10/19 17:25