下記のコードでは「理解できた」ボタンをクリックすると「終了済」ボタンに変化するようになっています。この「終了済」ボタンの色を変え、終わった感じを出すにはどのようにすれば良いでしょうか。恐れ入りますがよろしくお願い致します。 Sample #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%; } 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 + '%'; }); }); 理解度: 0% 理解状況チェック第１章：理解できた第２章：理解できた第３章：理解できた第４章：理解できた第５章：理解できた

詳しい人求む！

Webサイト作成プログレスバー HTML・CSS・JS

解決済

質問者：jun123.
質問日時：2021/01/02 01:09
回答数：1件

下記のコードでは「理解できた」ボタンをクリックすると「終了済」ボタンに変化するようになっています。この「終了済」ボタンの色を変え、終わった感じを出すにはどのようにすれば良いでしょうか。
恐れ入りますがよろしくお願い致します。

<!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>第１章：<button type="button">理解できた</button></p>
<p>第２章：<button type="button">理解できた</button></p>
<p>第３章：<button type="button">理解できた</button></p>
<p>第４章：<button type="button">理解できた</button></p>
<p>第５章：<button type="button">理解できた</button></p>
</fieldset>
</div>
</body>
</html>

通報する

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

質問の本文を隠す

回答 (1件)

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

No.1ベストアンサー

回答者： fujillin
回答日時：2021/01/02 01:44

前回回答者です。

（締め切られちゃったので、回答できませんでした）

＞ボタンの色を変え、終わった感じを出すにはどのようにすれば良いでしょうか。
CSSで制御すればよいです。
クラス設定をするようにした方が制御はしやすいですが、設定してはいないので、そのままやるなら・・・

#progress p button[value="done"] { background-color:#BBB; color:#EEE; }

といったものをCSSに追加すれば可能です。
「終わった感じを出す」のがどのような色合いなのかは知りませんので、お好みに調整して下さい。