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

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

ただいまの
回答率

90.02%

スマートフォン実機でonclickが動作しない

受付中

回答 0

投稿

  • 評価
  • クリップ 1
  • VIEW 691

yuna_star2

score 9

はじめに

お読み下さりありがとうございます。
こちらの記事を参考に、スマートフォン向けにjsでドロワーメニューを作成しているのですが、
PCのブラウザ上では動作するドロワーが実機では動作しなかったため今回ご質問させていただきました。
jsは勉強中の身であるため知識不足なところも多々ございますが、何卒ご教授いただけますと幸いです。
なお、下記のコードは実際のコードから必要部分のみの抜粋したものとなっております。

<nav class="sp-nav">
    <div class="nav-box">
        <ul class="nav-menu">
            <li class="nav-list"><a href="#">HOME</a></li>
            <li class="nav-list"><a href="#">メニュー</a></li>
            <li class="nav-list"><a href="#">メニュー</a></li>
        </ul>
    </div>
</nav>
<a class="sp-nav-button">
    <div class="button-icon"><span></span><span></span><span></span></div>
    <p class="button-text">MENU</p>
</a>
.sp-nav{
        position: fixed;
        z-index: 100;
        top: 50px;
        width: 100%;
        transition: .5s;
        transform: translateX(100%);
        -webkit-overflow-scrolling: touch;
        background: #fff;
        display: block;
    }

    .nav-box{
        height: 100%;
        overflow-y: auto;
    }

    .nav-menu{
        width: 100%;
    }

    .nav-list{
        width: 100%;
        height: 50px;
        border-bottom: 1px solid #707070;
    }

    .nav-list a{
        width: 96%;
        margin: 0 auto;
        display: flex;
        align-items: center;
        text-indent: .25em;
        font-size: 18px;
        color: #000;
        height: 100%;
        text-decoration: none;
    }

    .sp-nav-button, .sp-nav-button span{
        display: block;
        transition: .5s;
        cursor: pointer;
        text-decoration: none;
    }

    .sp-nav-button{
        position: absolute;
        height: 15px;
        width: 20%;
        right: 2%;
        display: flex;
        justify-content: space-between;
        font-size: 16px;
        top: 12px;
        color: #000;
    }

    .button-icon{
        width: 20px;
    }

    .sp-nav-button span{
        position: absolute;
        width: 20px;
        height: 3px;
        border-radius: 2px;
        background: #000;
    }

    .sp-nav-button span:first-of-type{
        top: 3px;
    }

    .sp-nav-button span:nth-of-type(2){
        top: 9px;
    }

    .sp-nav-button span:last-of-type{
        bottom: -3px;
    }

    .sp-nav-button.active span:first-of-type {
        transform: translateY(5px) rotate(-45deg);
    }
    .sp-nav-button.active span:nth-of-type(2) {
        opacity: 0;
    }
    .sp-nav-button.active span:last-of-type {
        transform: translateY(-5px) rotate(45deg);
    }

    .nav-open{
        position: fixed;
        left: 0;
    }

    .nav-open .sp-nav{
        transform: translateX(0);
    }
const sp_button = document.getElementsByClassName("sp-nav-button")[0];
const button_text = document.getElementsByClassName("button-text")[0];
const wrapper = document.getElementById("wrapper");
var top_position = 0;

sp_button.onclick = function(){
    if (wrapper.classList.contains("nav-open")) {
        wrapper.classList.remove("nav-open");

        sp_button.classList.remove("active");
        button_text.textContent="MENU";

        wrapper.removeAttribute("style");
        scrollTo(0, top_position);
    } else {
        var get_top = window.pageYOffset;
        var wrapper_style = "top:-"+get_top+"px;";
        wrapper.classList.add("nav-open");

        sp_button.classList.add("active");
        button_text.textContent="CLOSE";

        wrapper.setAttribute("style", wrapper_style);
        return get_top;
    }
};

確認環境

PC: Mac OSX El Capitan/Google Chrome65.0.3325.162
実機: iPhoneSE iOS10.3.3 safari / Chrome 57.2987.137

以上、何卒宜しくお願い致します。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正の依頼

  • tomato3713

    2018/03/27 08:13

    PCブラウザ上で動かしたときに開発者ツールにで何かエラーは出てはいなかったでしょうか?javascriptに"use strict"を追記してみると何かわかるかもしれません。

    キャンセル

  • yuna_star2

    2018/03/28 18:52

    >homedmさま 開発者ツールにエラーは出ておりませんでした。strictモードも試してみたのですが、特に変化はございませんでした…。

    キャンセル

  • tomato3713

    2018/05/10 01:28

    思いつきのレベルではありますが、eventListenerに登録するやりかたでやってみてはどうでしょうか。

    キャンセル

まだ回答がついていません

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

  • ただいまの回答率 90.02%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる