![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?e8efa67)
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を作って、jsの5行目のvalを新しい変数aisyoに変えて
if文でvalの数がこれならaisyoはこの文字列を代入するってやったんですが動かなかったです
No.1ベストアンサー
- 回答日時:
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を、普通の配列で作り直してみると、
もっとスマートになると思います。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript Javascript初心者|jQueryの.val()で値を取得し複数の要素を連結させる方法知りたい 2 2022/06/02 12:06
- JavaScript セレクトを全て選択されていないと、文字によるエラーメッセージを表示させるコードを調べています 2 2023/06/22 15:48
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
- JavaScript javascriptのちょっとした動作不良(原因は突き止めたのですが) 1 2023/06/15 19:58
- JavaScript HTMLでJavaScriptを使ってパスワードの強化判定のプログラムを作成しています。 一通り作っ 2 2022/10/19 01:41
- JavaScript フォームが空欄の時にフォームの外をクリックすると、エラーが出るコードを調べています。 1 2023/06/25 11:51
- JavaScript clear機能を失わずにファイルアップロード機能を作成したい 3 2023/06/10 16:12
- JavaScript switch文のswitch(n)の部分を複数の値にするか、if文に変えてほしいです。 1 2022/07/27 17:18
- JavaScript Javascriptが機能せず原因が分からないので教えて頂きたいです 3 2023/06/04 14:50
- Visual Basic(VBA) excel2021で実行できないマクロ。どこを直したらいいのか 2 2022/03/28 03:40
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
onchangeイベントを強制的に発...
-
javaScriptの変数をJavaの変数...
-
onclickが動作しない
-
ボタンをクリックするとテキス...
-
任意の<DIV></DIV>の中に計算結...
-
クリックさせたいが、click()が...
-
onClickがinput type="image"だ...
-
innerHTML内では改行は禁止?
-
複数のテキストボックスの値の...
-
JavaScriptのfileオブジェクト...
-
VB.NETで<Input>タグ、<text...
-
【javascript】ボタンクリック...
-
同じページにあるtextarea間で...
-
フォームの数値計算
-
javascriptで作成されたテーブ...
-
Selectボックスの幅を自動で広...
-
ボタン2回押しを無効にしたい
-
<JavaScript>tableタグを入力不...
-
return trueとreturn falseの用...
-
プルダウン 項目が多いので先頭...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
onchangeイベントを強制的に発...
-
追加ボタンを押した際に ok ボ...
-
クリックさせたいが、click()が...
-
onclickが動作しない
-
ボタンかリンクをクリックする...
-
javaScriptの変数をJavaの変数...
-
formのfileの値をhiddenでも持...
-
JSのボタンを複数う使うには
-
JavaScriptのfileオブジェクト...
-
innerHTML内では改行は禁止?
-
開いた子ウィンドウにあるボタ...
-
BackSpaceしたい(QNo.2734284の...
-
VB.NETで<Input>タグ、<text...
-
オンクリックで現在時刻の取得→...
-
JQueryでfunctionに引数としてI...
-
複数のテキストボックスの値の...
-
onClickがinput type="image"だ...
-
クリック→テキストボックスに追加
-
Javascriptで'(シングルクォー...
-
テキストフィールド未入力の場...
おすすめ情報