https://code-kitchen.dev/html/input-range/
このページに書いてあるサンプルコードの完成形と同じことをやってもhtmlの<span id="current-value"></span>ここに入るはずの数字が表れません
どのスライダーを選んでも”現在の値はです”と表示されます
分かる方教えてください
No.2ベストアンサー
- 回答日時:
こんにちは
参考で挙げているサイト上では、動作を確認できているのですよね?
であれば、同じものを作成すれば動作するはずですけれど・・・
>どのスライダーを選んでも”現在の値はです”と表示されます
「どのスライダーを」って同じものを複数作っているってことでしょうか??
意味がわかりません。
まずは、余分なものは無しにして、そのサイトにある内容と同じものだけで試してみることです。
一方で、もしも、スクリプトを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>
No.1
- 回答日時:
読み込みの順番かもしれません。
scriptは、bodyタグを閉じる直前に読み込むと良いと思います。
<body>
<input />
<p>~</p>
<script>~</script>
</body>
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript セレクトを全て選択されていないと、文字によるエラーメッセージを表示させるコードを調べています 2 2023/06/22 15:48
- JavaScript 読み込んだQRコードをフォームに受け渡したい 1 2023/05/18 11:18
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
- JavaScript javascriptのちょっとした動作不良(原因は突き止めたのですが) 1 2023/06/15 19:58
- HTML・CSS CSS のみのタブ切り替えについて 1 2023/01/11 16:47
- JavaScript フォームが空欄の時にフォームの外をクリックすると、エラーが出るコードを調べています。 1 2023/06/25 11:51
- PHP ここでの ②if($su_d<>"")の比較演算子 を使う理由は 1 2022/03/26 02:33
- JavaScript ①入力フォーム→②確認表示画面→③送信完了画面のコードを書いているのです、 入力フォームから受け取っ 2 2022/05/10 16:45
- PHP htmlspecialcharsが機能していないです。 バグですか? 1 2022/04/05 01:22
- JavaScript sessionStorageを調べています。 1 2023/06/20 12:41
関連するカテゴリからQ&Aを探す
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
JavaScriptからVBScriptの呼び...
-
Cygwinでログをのこす方法
-
Vbscriptで自分自身のウィンド...
-
javascript 解析タグのコメン...
-
undefinedが表示されてしまう
-
ウィンドウが閉じない
-
onbeforeunload時のwindow.open...
-
【js】attrで属性を取得する...
-
java scipt
-
<aタグで変数に文字を代入
-
サイトのソースに、あるjavascr...
-
<a href="#" …>の意味を教えて...
-
別ファイルのfunctionの読み込み方
-
スマホ上で、左右スワイプで次...
-
【Google Apps Script】「ライ...
-
javascriptファイルは1つに統...
-
bodyにidをつける理由は何ですか?
-
「オブジェクトを指定してくだ...
-
javascriptのalertで文字化けが...
-
JavaScriptでのEnterキーとAlt+...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
Vbscriptで自分自身のウィンド...
-
JavaScriptからVBScriptの呼び...
-
毎回、ページ読み込み時に1回...
-
ウインドウの後ろに隠れている...
-
onbeforeunload時のwindow.open...
-
<aタグで変数に文字を代入
-
javascriptでbgmを自動再生する...
-
datepickerで日付の値を取得したい
-
JavaScript関数呼出し元の要素...
-
Cygwinでログをのこす方法
-
showModalDialogで開いた画面か...
-
PrintScreenキーを無効にしたい
-
undefinedが表示されてしまう
-
ブラウザの「戻る」ボタンを押...
-
リンク先のJavaScriptを実行す...
-
<script>...</script> 要素の内
-
location.reload() について
-
フォルダ名の取得方法
-
確認ダイアログで「キャンセル...
-
Java ScriptでIPによるアクセス...
おすすめ情報