jQueryからJavaScriptへの書き換え

Question

#jqueryをjavascriptへ書き換えについて

下記jqueryをjavascriptへ書き換えを行いました。
jsにて下記エラーが表示されたのですが、どこが間違っているのかわからない状況になります。

大変恐縮ですが、プログラミングにつきまして
初心者のため何が違うのかなど詳しくご教示いただけると幸いです。

お手数おかけいたしますが、何卒よろしくお願いいたします。

参考サイトはこちらになります。

######エラー文：Uncaught SyntaxError: Unexpected identifier

$("#tab1").click(moveToFirst);
$("#tab2").click(moveToSecond);
$("#tab3").click(moveToThird);
$("#tab4").click(moveToFour);

function moveToFirst() {
    $("#slide").attr('class', 'move-to-first');
    $(".tab").attr('class', 'tab');
    $("#tab1").attr('class', 'tab selected');
}

function moveToSecond() {
    $("#slide").attr('class', 'move-to-second');
    $(".tab").attr('class', 'tab');
    $("#tab2").attr('class', 'tab selected');
}

function moveToThird() {
     $("#slide").attr('class', 'move-to-third');
    $(".tab").attr('class', 'tab');
    $("#tab3").attr('class', 'tab selected');
}

function moveToFour() {
     $("#slide").attr('class', 'move-to-four');
    $(".tab").attr('class', 'tab');
    $("#tab4").attr('class', 'tab selected');
}

↓上記jqueryを下記JavaScriptへ書き換えました

document.getElementById("tab1").onclick = function() {
  function moveToFirst() {
    var content1 = document.getElementById("slide");
    content1.classList.add("move1");
    var tab1 =  document.getElementById("tab1");
    tab1.classList.add("tab selected");
  }
};

document.getElementById("tab2").onclick = function() {
  function moveToSecond() {
    var content2 = document.getElementById("slide");
    content2.classList.add("move2");
    var tab2 =  document.getElementById("tab2");
    tab1.classList.add("tab selected");
  }
};

document.getElementById("tab3").onclick = function() {
  function moveToThird() {
    var content3 = document.getElementById("slide");
    content3.classList.add("move3");
    var tab3 =  document.getElementById("tab3");
    tab3.classList.add("tab selected");
  }
};

document.getElementById("tab4").onclick = function() {
  function moveToFour() {
    var content4 = document.getElementById("slide");
    content4.classList.add("move4");
    var tab4 =  document.getElementById("tab4");
    tab4.classList.add("tab selected");
  }
};

念の為、html cssも記載いたします

<div id="wrap">
      <div id="tab1" class="tab selected">Tab 1</div>
      <div id="tab2" class="tab">Tab 2</div>
      <div id="tab3" class="tab">Tab 3</div>
      <div id="tab4" class="tab">Tab 4</div>
      <div id="container">
        <div id="slide" class="">
          <div id="first" class="box">Check this Out</div>
          <div id="second" class="box">TAB TWO</div>
          <div id="third" class="box">TAB THREE</div>
          <div id="four" class="box">TAB FOUR</div>
        </div>
      </div>
    </div>

body, html {
  margin: 0px;
  padding: 0px;
  width: 100%;
  height:100%;
  text-align: center;
}

#wrap {
  width: 400px;
  margin: 0 auto;
  margin-top: 10px;
}

.tab {
    height: 40px;
    width: 100px;
    border-bottom: 4px solid black;
    line-height: 40px;
    text-align: center;
    font-size: 20pt;
    float: left;
    cursor: pointer;
}

.selected {
    background-color: black;
    color: white;
    border: none;
}

#container {
    position: relative;
    width: 400px;
    height: 200px;
    overflow: hidden;
    clear: left;
}

.box {
    display: inline-block;
    white-space: nowrap;
    position: absolute;
    width: 400px;
    height: 200px;

    line-height: 200px;
    text-align: center;
    font-size: 28pt;
    cursor: pointer;
}

#first {
    top: 0px;
    left: 0px;
}

#second {
    top: 0px;
    left: 400px;
}

#third {
    top: 0px;
    left: 800px;
}

#four {
    top: 0px;
    left: 1200px;
}

#slide {
    transition: transform 1s ease-in-out 0s;
    -moz-transition: -moz-transform 1s ease-in-out 0s;
    -webkit-transition: -webkit-transform 1s ease-in-out 0s;
}

.move-to-second {
    transform: translateX(-400px);
    -moz-transform: translateX(-400px);
    -webkit-transform: translateX(-400px);
}

.move-to-third {
    transform: translateX(-800px);
    -moz-transform: translateX(-800px);
    -webkit-transform: translateX(-800px);
}

.move-to-first {
    transform: translateX(0px);
    -moz-transform: translateX(0px);
    -webkit-transform: translateX(0px);    
}

.move-to-four {
    transform: translateX(-1200px);
    -moz-transform: translateX(-1200px);
    -webkit-transform: translateX(-1200px);    
}

Answer 1

どこが間違っているのかわからない状況になります

1. asuchi0819さんが回答済みです

(イベントリスナの処理は、関数定義されているだけの無意味なコードになっている）。
ご質問のコードから４つ目だけを変えて例示しますが、全てのリスナを書き換えてください。
2. click イベントを定義する対象が tab1 しかありません。 tab2 〜 tab4も定義してください
3. リスナ内で適切なclassを指定できていません。
(例えば、move-to-third を move3 に書き換えるなら、CSSの書き換えが必要になり、手間なので、そのまま活用する)

// 1. ご質問のコードから４つ目（表記忘れでしたので追記）
document.getElementById("tab4").onclick = function(event) {
  console.log( event.target )
  document.getElementById("slide").classList.add("move4");
  document.getElementById("tab4").classList.add("tab selected"); // 要修正と思います
};

// 3. ３つ目のタブに定義するイベントリスナの内容：
$("#slide").attr('class', 'move-to-third'); // elm.className = 'move-to-third'
$(".tab").attr('class', 'tab'); // .tab 全てを elm.className = 'tab' (selected を削除）
$("#tab3").attr('class', 'tab selected'); // 改めて selected を加える

---

書き換えについて

一気に書き換えると、不慣れなAPIを利用したときに間違いに気づけない状態に陥りやすくなります。
static なHTMLで console.log() を仕込んだコードを、こまめに実行するのが良いと思います。

Comments

[06140614]

@AkitoshiManabe様

ご返答いただきありがとうございます！
また、ご返答が遅れてしまい大変申し訳ございません。

お忙しい中、細かくご返答してくださり大変恐縮です。
今後は、console.log() で細かく確認し、対応いたします！

この度はありがとうございました！

Answer 2

そもそも元のjQueryがおかしい

• attr()でclassをいじるのはやめるべき、addClassとかつかってください
• 関数をバラバラにつくる意味がありません。機能をまとめて一つにしてください

Comments

[06140614]

コメントしたくださりありがとうございます！

> そもそも元のjQueryがおかしい
→jQueryがおかしいとご指摘ありがとうございます。
　大変恐縮ですが、今回はjs文へのご指摘をいただけると幸いです。

お忙しい中、恐れ入りますが
ご確認いただけますと幸いですm

[yambejp]

若干HTMLを調整していいならこう
<script>
window.addEventListener('DOMContentLoaded', ()=>{
document.querySelectorAll('.tab').forEach(x=>{
x.addEventListener('click',e=>{
const slideClass=document.querySelector('#slide').classList;
slideClass.remove(...slideClass);
slideClass.add("move-to-"+x.dataset["target"]);
document.querySelector('.tab.selected').classList.remove('selected');
x.classList.add('selected');
});
});
});
</script>
<div id="wrap">
<div id="tab1" class="tab selected" data-target="first">Tab 1</div>
<div id="tab2" class="tab" data-target="second">Tab 2</div>
<div id="tab3" class="tab" data-target="third">Tab 3</div>
<div id="tab4" class="tab" data-target="four">Tab 4</div>
<div id="container">
<div id="slide">
<div id="first" class="box">Check this Out</div>
<div id="second" class="box">TAB TWO</div>
<div id="third" class="box">TAB THREE</div>
<div id="four" class="box">TAB FOUR</div>
</div>
</div>
</div>

HTML自体をいじれないなら、もうすこし工夫が必要

[yambejp]

もとのままでもそんなに変わらずにいけたので追記
window.addEventListener('DOMContentLoaded', ()=>{
const target={tab1:"first",tab2:"second",tab3:"third",tab4:"four"};
document.querySelectorAll('.tab').forEach(x=>{
x.addEventListener('click',e=>{
const slideClass=document.querySelector('#slide').classList;
slideClass.remove(...slideClass);
slideClass.add("move-to-"+target[x.id]);
document.querySelector('.tab.selected').classList.remove('selected');
x.classList.add('selected');
});
});
});

[06140614]

@yambejp様

ご返答が遅れてしまい、大変申し訳ございません。
ご返答いただきありがとうございます。
また追記も大変嬉しく存じあげます！

もう1点お聞きしてもよろしいでしょうか。

追記でコメントいただきました
コードをローカルのIE11で確認したところJSが動きませんでした。

何か原因等につきまして、大変恐れく申し訳ないのですが
ご教示いただくことは可能でしょうか。

何卒、よろしくお願いいたします。

[yambejp]

もはやcodepenとかがIE11に対応していないので微妙ですが

https://codepen.io/yambejp/pen/BajqKER

[06140614]

@yambejp様

ご返答いただきありがとうございます！

お忙しい中ご返答いただき、お答えいただきありがとうございました。
また、ご返答が遅れてしまい大変申し訳ございませんでした。

ご返答いただいたコードでIE11は問題なく動作確認できました。

ベストアンサーとさせていただきます。
また、何かございましたらよろしくお願いいたします。

Answer 3

2行目、11行目等が少なくとも違います。

functiom -> function

Comments

[06140614]

コメントしてくださりありがとうございます！
ご指摘いただいた箇所ですが、修正いたしました。