下記のコードでは「理解できた」ボタンをクリックすると「終了済」ボタンに変化するようになっています。この「終了済」ボタンの色を変え、終わった感じを出すにはどのようにすれば良いでしょうか。
恐れ入りますがよろしくお願い致します。
<!DOCTYPE HTML>
<html lang="ja">
<head><title>Sample</title>
<style>
#progress { width: 18em; }
#progress p { margin: 0.5em 1em; padding: 0; }
#progress p button { width:8em; margin-left: 2em; }
#progress .slid_wrap { margin: 1em 0 1em 1em; position: relative; }
#progress .slid_wrap input { width: 11em; }
#progress .slid_wrap span { font-size: .8em; font-weight: bold; }
#progress .slid_wrap .cover {
position: absolute; top: 0; left: 0;
width: 100%; height: 100%;
}
</style>
<script>
window.addEventListener('DOMContentLoaded', ()=>{
let p = document.getElementById('progress');
p.querySelector('fieldset').addEventListener('click', (e)=>{
let n, t = e.target;
if(e.target.nodeName != 'BUTTON') return;
t.textContent = t.value?'理解できた':'終了済';
t.value = t.value?'':'done';
n = p.querySelectorAll('button[value="done"]').length * 20;
p.querySelector('.slid_wrap input').value = n;
p.querySelector('.slid_wrap span').textContent = n + '%';
});
});
</script>
</head>
<body>
<div id="progress">
<div class="slid_wrap">
<label>理解度:</label>
<input type="range" min="0" max="100" value="0" />
<span>0%</span>
<div class="cover"></div>
</div>
<fieldset>
<legend>理解状況チェック</legend>
<p>第1章:<button type="button">理解できた</button></p>
<p>第2章:<button type="button">理解できた</button></p>
<p>第3章:<button type="button">理解できた</button></p>
<p>第4章:<button type="button">理解できた</button></p>
<p>第5章:<button type="button">理解できた</button></p>
</fieldset>
</div>
</body>
</html>
No.1ベストアンサー
- 回答日時:
前回回答者です。
(締め切られちゃったので、回答できませんでした)
>ボタンの色を変え、終わった感じを出すにはどのようにすれば良いでしょうか。
CSSで制御すればよいです。
クラス設定をするようにした方が制御はしやすいですが、設定してはいないので、そのままやるなら・・・
#progress p button[value="done"] { background-color:#BBB; color:#EEE; }
といったものをCSSに追加すれば可能です。
「終わった感じを出す」のがどのような色合いなのかは知りませんので、お好みに調整して下さい。
回答締め切ってしまいすみませんでした。
ありがとうございます、うまくできました!
有料級のご回答本当にありがとうございました!!
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
- ・ゆるやかでぃべーと タイムマシンを破壊すべきか。
- ・歩いた自慢大会
- ・許せない心理テスト
- ・字面がカッコいい英単語
- ・これ何て呼びますか Part2
- ・人生で一番思い出に残ってる靴
- ・ゆるやかでぃべーと すべての高校生はアルバイトをするべきだ。
- ・初めて自分の家と他人の家が違う、と意識した時
- ・単二電池
- ・チョコミントアイス
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
onchangeイベントを強制的に発...
-
JavaScript Form OPTION value
-
テキストの背景色を変える。
-
クリックさせたいが、click()が...
-
JavaScriptでの文字の流れる掲...
-
計算の答えと入力値の合致チェック
-
追加ボタンを押した際に ok ボ...
-
JavaScriptなどでみられるstrと...
-
Date関数で取得したデータの取...
-
1つのページにformを2つ設置。2...
-
このjavascriptがわかりません
-
onClickとsubmitの処理順序
-
新しくフォルダを作成したい
-
javascriptで二重送信防止
-
2次元配列で2項目についてソー...
-
ラジオボタンの値でリンク先を...
-
マウスをブラウザの外に出した...
-
JavaScriptで特定のtdタグにcla...
-
数字の1文字目を消したい
-
onclickで画像と文字を別々の場...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
onchangeイベントを強制的に発...
-
javaScriptの変数をJavaの変数...
-
クリックさせたいが、click()が...
-
onclickが動作しない
-
formのfileの値をhiddenでも持...
-
innerHTML内では改行は禁止?
-
追加ボタンを押した際に ok ボ...
-
ボタンかリンクをクリックする...
-
JQueryでfunctionに引数としてI...
-
JavaScriptのfileオブジェクト...
-
JSのボタンを複数う使うには
-
クリックでテーブル内の背景色...
-
VB.NETで<Input>タグ、<text...
-
ブラウザの外にあるマウスの情...
-
jQueryでshow/hideが上手く行か...
-
onClickがinput type="image"だ...
-
【javascript】ボタンクリック...
-
開いた子ウィンドウにあるボタ...
-
javascriptで作成されたテーブ...
-
jQueryで設定したイベントハン...
おすすめ情報