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/components/ToggleLogin.js')}}"></script>
@endpush
Tried different approaches the whole day. Inspired by this proposals from stackoverflow:
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?
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.