値に応じた、ゲージ内データの表示ができません。
Q&A
Closed
解決したいこと
JavaScript初心者です。
下記画像のゲージの表示を "data-value" に応じて赤色でアニメーション付きで塗られるようにしたいのですが、表示がされません。
CSSは念の為、記載しております。
例）
HTML部
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animated Bar Graphs</title>
</head>
<body>
<div class="graph-row">
<div class="graph-container" data-value="30">
<span>Skill1</span>
<div class="bar">
<div class="outer">
<div class="inner"></div>
</div>
</div>
</div>
<div class="graph-container" data-value="60">
<span>Skill2</span>
<div class="bar">
<div class="outer">
<div class="inner"></div>
</div>
</div>
</div>
<div class="graph-container" data-value="80">
<span>Skill3</span>
<div class="bar">
<div class="outer">
<div class="inner"></div>
</div>
</div>
</div>
</div>
<div class="graph-row">
<div class="graph-container" data-value="40">
<span>Skill4</span>
<div class="bar">
<div class="outer">
<div class="inner"></div>
</div>
</div>
</div>
<div class="graph-container" data-value="70">
<span>Skill5</span>
<div class="bar">
<div class="outer">
<div class="inner"></div>
</div>
</div>
</div>
<div class="graph-container" data-value="50">
<span>Skill6</span>
<div class="bar">
<div class="outer">
<div class="inner"></div>
</div>
</div>
</div>
</div>
</body>
JavaScript部
document.addEventListener("DOMContentLoaded", function () {
const bars = document.querySelectorAll('.bar .inner');
let animationStarted = false;
// 0.5秒後にアニメーション開始
setTimeout(() => {
// スクロールイベントのリスナーを追加
window.addEventListener('scroll', () => {
// ゲージの位置（例として10px）までスクロールされたらアニメーションを開始
if (window.scrollY > 10 && !animationStarted) {
bars.forEach((bar, index) => {
const value = bar.parentElement.getAttribute('data-value');
setTimeout(() => {
bar.style.width = `${value}%`; // 各要素ごとに設定
animationStarted = true;
}, index * 500); // 各要素を0.5秒ごとにアニメーション
});
}
});
}, 500);
});
CSS部
body {
font-family: Arial, sans-serif;
display: flex;
flex-direction: column;
align-items: center;
padding: 20px;
margin-bottom: 600px;
}
.graph-row {
display: flex;
justify-content: space-between;
width: 80%;
margin-bottom: 20px;
}
.graph-container {
width: 250px;
margin: 10px;
position: relative;
}
.bar {
position: relative;
height: 30px;
margin-bottom: 5px;
border-radius: 10px; /* 角丸 */
overflow: hidden;
border: 2px solid #000; /* 黒い枠 */
}
.bar .outer {
height: 100%;
background-color: #eee; /* ゲージの背景色 */
}
.bar .inner {
height: 100%;
background-color: #e74c3c; /* 赤い色 */
transition: width 1s ease-in-out;
width: 0; /* 初期状態でゲージを非表示にするための設定 */
}
.bar span {
display: block;
height: 100%;
color: #fff;
text-align: center;
line-height: 30px;
position: absolute;
top: 0;
left: 0;
padding: 0 5px;
width: 100%;
}
解決方法
JavaScript内の
const value = bar.parentElement.getAttribute('data-value');
を
const value = bar.closest('.graph-container').getAttribute('data-value');
に変更することで解決できました！
0
