https://code-kitchen.dev/html/input-range/ このページに書いてあるサンプルコードの完成形と同じことをやってもhtmlのここに入るはずの数字が表れませんどのスライダーを選んでも”現在の値はです”と表示されます分かる方教えてください

詳しい人求む！

javascript スライダー

解決済

質問者：わちょん
質問日時：2021/10/19 05:29
回答数：2件

https://code-kitchen.dev/html/input-range/
このページに書いてあるサンプルコードの完成形と同じことをやってもhtmlの<span id="current-value"></span>ここに入るはずの数字が表れません

どのスライダーを選んでも”現在の値はです”と表示されます

分かる方教えてください

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

ベストアンサー優先
最新から表示
回答順に表示

No.2ベストアンサー

回答者： fujillin
回答日時：2021/10/19 09:06

こんにちは

参考で挙げているサイト上では、動作を確認できているのですよね？
であれば、同じものを作成すれば動作するはずですけれど・・・

＞どのスライダーを選んでも”現在の値はです”と表示されます
「どのスライダーを」って同じものを複数作っているってことでしょうか？？
意味がわかりません。
まずは、余分なものは無しにして、そのサイトにある内容と同じものだけで試してみることです。

一方で、もしも、スクリプトをhead内にコピペしているのであれば、動作しない可能性はあります。
その場合は、スクリプト全体をbodyの終了タグ（</body>）の直前に置けば動作するでしょう。

head内に記述しても動作するようにしたければ、記述の順序を変えて以下のようにすれば動作すると思います。
（基本的に同じ内容なので、コメント行は省略）
<script>
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);
}
</script>