Q&A
前提・実現したいこと
背景スライドショーをjsで実行しようとしています。
classListadd,classListremoveを使ってbodyのクラスを変更することによって背景が画像を変えようとしているのですが、うまくいきません。
※注 スライドショーについてはもっと楽な方法があるのはしっています。
発生している問題・エラーメッセージ
エラーメッセージは表示されていません。
１番はじめの背景画像は表示されますが、いつまでたっても.body1の画像に代わりません。
VSコード上のurlをクリックすると画像は表示されるのでurlはあっていると思います。
該当のソースコード
html
1<!DOCTYPE html> 2 <html lang="ja"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title>Musia!</title> 7 <link rel="stylesheet" href="css/styles.css"> 8 </head> 9 10<body id="BB" class="body0"> 11~~~~~~~~~~~~~~ 12</body> 13 14<footer> 15 ~~~~~~~~ 16</footer> 17 18 19<script type="text/javascript" src="script.js"></script> 20 21</html>
css
1 2.body0 { 3background-image: url("../Musica/Slide0.jpg"); 4 background-size: cover; 5 background-repeat: no-repeat; 6 background-attachment: fixed; 7 background-color: rgba(255, 255, 255, 0.8); 8 background-blend-mode:lighten; 9} 10 11.body1{ 12... 13} 14 15 16以下同様 17 18（.body1~.body6は.body0のurlのみを変更したものです。）
js
1var g = document.querySelector('#BB'); 2 3var i = 0; 4 5const Slide = function Back() { 6 7 g.classList.remove('"body" + i'); 8 g.classList.add('"body" + ( i + 1 )'); 9 i++; 10 11 if(i === 6){ 12 i = 0; 13 }; 14 15 setTimeout(Slide,5000) 16 }; 17 18Back();
試したこと
var i = 0を g.classList.remove('"body" + i'); の直前に書きました。
始めはg＝document.getElementByTagName（”BB"）を使って実行しようとしましたが、調べるとその方法ではHTMLCollectionが返ってくるとのことだったのでやめました。
また、var i = 0 がfunctionより前に書かれているので「functionを実行するたびにi = 0から始まるのでは」と思いfor文で書こうとしましたがfor文の実行間隔を操作する方法を知らべても出てこなかったため、ひとまずこの記述で止めました。
.body0から.body1に変化するのを確認した上で考えるつもりです。
補足情報（FW/ツールのバージョンなど）
chrome
VSコード
回答1件
0
ベストアンサー
javascript
1g.classList.remove('"body" + i'); 2g.classList.add('"body" + ( i + 1 )');
の次の行に、
javascript
1console.log('"body" + i'); 2console.log('"body" + ( i + 1 )');
を書いて、出力内容を確認してみてください。
body0 や body1 が出力されることを想定しているようですが、そうなっていますか？
投稿2019/11/17 08:28
総合スコア999
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/11/17 12:04