else以降の命令が効かない

前提・実現したいこと

初心者でjsを勉強しているものです。初歩的なこと質問していたらすみません。
スクロールの値が一定値で画像が動いて、一定値はずれたら元の形に戻るようなものを作ろうとしてるのですが、else以降の命令が効いていないみたいで、一定値になって画像が動いてから戻らない状態になてしまいました。どうしたら良いのかわからなくなってしまったので、どなたか助言をいただけませんでしょうか、よろしくお願いします。

発生している問題・エラーメッセージ

一定値になって画像が動いてから、一定値から離れても画像が元の状態に戻らない。

該当のソースコード

html
1<!DOCTYPE html>
2<html>
3<head>
4<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
5<link rel="stylesheet" type="text/css"  href="main.css">
6    <title></title>
7	<meta charset="utf-8" />
8
9  </style>
10  <script type="text/javascript" src="main.js"></script>
11</head>
12<body>
13  <div id="infoFrame" class="FloatInfo"></div>
14  <div class="container">
15    <img id="img_1" src="500_F.jpg">
16  </div>
17
18</body>
19</html>
20

css
1@charset "utf-8";
2.FloatInfo{
3    position:fixed;
4    top:16px;
5    right:16px;
6    width:240px;
7    height:60px;
8    background-color:rgb(180, 81, 81);
9}
10.container{
11    height: 2000px;
12    background-color: rgba(252, 253, 244, 0.966);
13}
14#img_1{
15    margin-top: 1000px;
16    transition: 0.5s;
17}
18#img_1.active{
19    background-color: aqua;
20    padding: 5em;
21}

js
1
2
3window.onscroll = function() {
4    var infoF = document.getElementById("infoFrame");
5    var scroll_Y =  document.documentElement.scrollTop;
6    infoF.innerHTML = "ScrollY:" + scroll_Y;
7
8    
9if ( 800 <= scroll_Y && scroll_Y<= 1100){ 
10  var target_1 = document.getElementById("img_1");
11    if(target_1.className ==null || target_1.className == ""){
12      target_1.className = "active";
13      }
14} else {
15  target_1.className = "";
16  }
17}
18  
19

試したこと

elseのカッコ内にalertを入れても反応しませんでした。

補足情報（FW/ツールのバージョンなど）

行動規範の内容に同意します

回答2件

window.onscroll = function() {
    var infoF = document.getElementById("infoFrame");
    var scroll_Y =  document.documentElement.scrollTop;
    infoF.innerHTML = "ScrollY:" + scroll_Y;


  if ( 800 <= scroll_Y && scroll_Y<= 1100){ 
    var target_1 = document.getElementById("img_1");
    if(target_1.className ==null || target_1.className == ""){
      target_1.className = "active";
    } else {
      target_1.className = "";
    }
  }
}

おそらくこうなのでは？
元のコードだと
800 <= scroll_Y && scroll_Y<= 1100
がfalseの時に
target_1.className = "";
が処理されてますよ

投稿2019/03/29 15:33

tomagurosu

総合スコア37

mogumogu22

2019/03/30 01:29

回答ありがとうございます！いただいたコードでやってみたのですが、範囲内で画像が何度も動いてしまいちょっとイメージと違う動きでした。せっかく提案してくださったのにすみません。 800 <= scroll_Y && scroll_Y<= 1100の範囲を外れたらクラスの名前を外して、画像の動きをもとに戻したいのです。

行動規範の内容に同意します

ベストアンサー

複数のブラウザで開発者機能を使用して動作確認する癖を身につけましょう

else内ではtarget_1が未定義です
var target_1 = document.getElementById("img_1");をスクロール範囲の条件の外で取得しておきましょう
変数のスコープで調べてみてください

var target_1 = document.getElementById("img_1");
if(スクロール範囲の条件) {
・・・略：target_1の取得を削除するだけ
} else {
・・・略：そのまま
}

投稿2019/03/30 02:09

len_souko

総合スコア1348

mogumogu22

2019/03/30 03:01

無事できました！ぬるぬる動きます。感動です>▽< elseの方で未定義になってたんですね。勉強になりました。変数のスコープ勉強しようと思います！助かりました。助言ありがとうございました！！

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！