Goal

I want to get the touch position respectively the direction of the touchmove and depending on the movement fade in or out a login button (for the test purpouse i just change the background at the moment)

Problem

The console gives me the following error:

Cannot read property 'changedTouches' of undefined at HTMLDocument.checkScrollPosition

respectively

 Cannot read property 'touches' of undefined at HTMLDocument.checkScrollPosition

I'm working with Laravel and plain JS.

Thats the function i actually try (its inside of the ToggleLogin.js):

window.onload = function FadeLoginButton() {
    const width = window.innerWidth;
    if (width < 850) {
        document.addEventListener("touchstart", startTouch);
        document.addEventListener("touchmove", checkScrollPosition);
    }
};

let touchstart;

function startTouch(e) {
    touchstart = e.originalEvent.touches[0].clientY;
}


function checkScrollPosition(e) {
    const touchend = e.originalEvent.changedTouches[0].clientY;

    const button = document.getElementById("mobile-login-btn");
    if (touchstart > touchend) {
        button.style.background = "green";
    } else {
        button.style.background = "blue";
    }
}

Or a variation:

window.onload = function FadeLoginButton() {
    const width = window.innerWidth;
    if (width < 850) {
        document.addEventListener("touchstart", checkScrollPosition);
        document.addEventListener("touchmove", checkScrollPosition);
    }
};

function checkScrollPosition(e) {
    const touchstart = e.originalEvent.touches[0].clientY;
    const touchend = e.originalEvent.changedTouches[0].clientY;

    const button = document.getElementById("mobile-login-btn");
    if (touchstart > touchend) {
        button.style.background = "green";
    } else {
        button.style.background = "blue";
    }
}

And thats the blade, where the function gets called:

<button class="floating-btn" id="mobile-login-btn" onClick="ToggleMobileLogin()">Login</button>
<div class=login-modal id="login-modal">
  <form class="modal-content">
    <input type="checkbox" class="close-button" onClick="ToggleMobileLogin()" />
    <a class="close-cross"></a>
    <input class="basic-input" placeholder="Name" autofocus />
    <input class="basic-input" placeholder="Passwort" />
    <button class="basic-btn">Anmelden</button>
  </form>
</div>


@push('scripts')

<script src="{{ asset('js/ponents/ToggleLogin.js')}}"></script>

@endpush

Tried different approaches the whole day. Inspired by this proposals from stackoverflow:

Link1

Link2

I also found this post, but that doesnt help in my case.

Here you can finde the whole branch

I guess, its a simple javascript fault. An undefined obviously ;) Maybe somebody can release me?

Goal

I want to get the touch position respectively the direction of the touchmove and depending on the movement fade in or out a login button (for the test purpouse i just change the background at the moment)

Problem

The console gives me the following error:

Cannot read property 'changedTouches' of undefined at HTMLDocument.checkScrollPosition

respectively

 Cannot read property 'touches' of undefined at HTMLDocument.checkScrollPosition

I'm working with Laravel and plain JS.

Thats the function i actually try (its inside of the ToggleLogin.js):

window.onload = function FadeLoginButton() {
    const width = window.innerWidth;
    if (width < 850) {
        document.addEventListener("touchstart", startTouch);
        document.addEventListener("touchmove", checkScrollPosition);
    }
};

let touchstart;

function startTouch(e) {
    touchstart = e.originalEvent.touches[0].clientY;
}


function checkScrollPosition(e) {
    const touchend = e.originalEvent.changedTouches[0].clientY;

    const button = document.getElementById("mobile-login-btn");
    if (touchstart > touchend) {
        button.style.background = "green";
    } else {
        button.style.background = "blue";
    }
}

Or a variation:

window.onload = function FadeLoginButton() {
    const width = window.innerWidth;
    if (width < 850) {
        document.addEventListener("touchstart", checkScrollPosition);
        document.addEventListener("touchmove", checkScrollPosition);
    }
};

function checkScrollPosition(e) {
    const touchstart = e.originalEvent.touches[0].clientY;
    const touchend = e.originalEvent.changedTouches[0].clientY;

    const button = document.getElementById("mobile-login-btn");
    if (touchstart > touchend) {
        button.style.background = "green";
    } else {
        button.style.background = "blue";
    }
}

And thats the blade, where the function gets called:

<button class="floating-btn" id="mobile-login-btn" onClick="ToggleMobileLogin()">Login</button>
<div class=login-modal id="login-modal">
  <form class="modal-content">
    <input type="checkbox" class="close-button" onClick="ToggleMobileLogin()" />
    <a class="close-cross"></a>
    <input class="basic-input" placeholder="Name" autofocus />
    <input class="basic-input" placeholder="Passwort" />
    <button class="basic-btn">Anmelden</button>
  </form>
</div>


@push('scripts')

<script src="{{ asset('js/ponents/ToggleLogin.js')}}"></script>

@endpush

Tried different approaches the whole day. Inspired by this proposals from stackoverflow:

Link1

Link2

I also found this post, but that doesnt help in my case.

Here you can finde the whole branch

I guess, its a simple javascript fault. An undefined obviously ;) Maybe somebody can release me?

• javascript
• laravel
• touches

2 Answers 2

You should not use e.originalEvent in vanilla javascript. That is part of jQuery event API.

Try: touchstart = e.touches[0].clientY and e.changedTouches[0].clientY

That should work.

Here's how to get the direction of scroll;

    var prevScrollPos = 0;

    el.ontouchmove = function(ev) {
        console.log(prevScrollPos - ev.changedTouches[0].clientY);
        prevScrollPos = ev.changedTouches[0].clientY;
    };

The console logged value can be -ve and +ve which means the direction in which the user is scrolling. (I used el, you can replace that with window)