I established a var variable called --item-width in JavaScript. I assumed it would function correctly in the CSS, but unfortunately, it's not working as intended. What steps should I take next? Being a novice, I probably made a mistake somewhere. Your assistance is greatly appreciated.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>marquee_text</title>
<link href="CSS/style.css" type="text/css" rel="stylesheet">
<script src="js/script.js" defer></script>
</head>
<body>
<div id="wrap">
<div class="marquee-text">
<div class="marquee-text__wrapper" data-controller="marquee">
<a href="#" class="item-link" target="_blank"></a>
<div class="marquee-text__item">
<strong>Marquee Text</strong>
<svg class="marquee-text__separator" height="19" width="19" viewBox="0 0 100 95.11">
<polygon points="50 0 65.45 31.31 100 36.33 75 60.7 80.9 95.11 50 78.86 19.1 95.11 25 60.7 0 36.33 34.55 31.31 50 0"/>
</svg>
<span>Marquee Text</span>
</div>
</div>
</div>
</div>
</body>
</html>
@charset "UTF-8";
:root {
--item-width: 0;
}
.marquee-text {
position: relative;
width: 100%;
display: flex;
align-items: center;
overflow: hidden;
white-space: nowrap;
height: 50px;
background-color: #222;
font-size: 17px;
color: #fff;
}
.marquee-text__wrapper {
display: flex;
align-items: center;
height: 100%;
}
.marquee-text__item {
padding: 0 10px;
}
.marquee-text__separator {
position: relative;
top: -1px;
margin: 0 10px;
font-size: 1.3em;
vertical-align: middle;
fill: currentColor;
}
.marquee-text a:hover {
opacity: 0;
}
@keyframes marquee-text-ani {
0% {
transform: translate3d(0, 0, 0);
}
100% {
/* This snippet doesn't seem to be functioning properly. */
transform: translate3d(-(var(--item-width))'px', 0, 0);
}
}
setTimeout(()=>{
this.move()
}, 200)
function move() {
const $marqueeTop = document.querySelector(".marquee-text__wrapper");
const $marqueeTopItem = document.querySelector(".marquee-text__wrapper>div");
const $root = document.querySelector(":root");
const itemWidth= $marqueeTopItem.clientWidth;
for (i = 0; i < 10; i++) {
let marqueeTopItem = $marqueeTopItem.cloneNode(!0);
$marqueeTop.appendChild(marqueeTopItem);
}
// The variable mentioned here seems to be having issues interacting with CSS.
$root.style.setProperty(`--item-width`, itemWidth);
$marqueeTop.style.animation = `marquee-text-ani 4s linear 1s forwards infinite`;
}