The goal is to execute a function when a button with the class .more is clicked. However, after modifying the code to troubleshoot the issue, none of the event handlers are working on Apple.
The following code runs without any problems on Android (Chrome & Firefox) and on Windows (Chrome & Edge) but not on an Apple Phone or Tablet (Safari & Firefox)
HTML Snippet
Here is the entire Javascript code.
The buttons are available twice. One for mobile and one for desktop.
I hope that someone can help me here, because I am desperate.
The following code runs without any problems on Android (Chrome & Firefox) and on Windows (Chrome & Edge) but not on an Apple Phone or Tablet (Safari & Firefox)
HTML Snippet
HTML:
<div class="col-lg-6 col-11 overflow-hidden">
<div class="glas">
<h3 class="text-center"><u>Zusammenführung:</u></h3>
<picture>
</picture>
<blockquote class="px-3">
<p>
Text.....
</p>
</blockquote>
<div id="liveAlertPlaceholder4"></div>
<div class="row px-3">
<div class="col-4">
<button id="btn4" type="button" class="more btn btn-outline-light d-lg-block d-none">Mehr... </button>
<button id="btnM4" type="button" class="more btn btn-outline-dark d-block d-lg-none">Mehr... </button>
</div>
<div class="col">
<button type="button" class="btn btn-outline-light d-none d-lg-block cat-enrolment-btn-form2 ms-auto"
data-sel="Zusammenführung:">Anfrage senden</button>
<button type="button" class="btn btn-outline-dark d-block d-lg-none cat-enrolment-btn-form2 ms-auto"
data-sel="Zusammenführung:">Anfrage senden</button>
</div>
</div>
</div>
</div>Here is the entire Javascript code.
JavaScript:
document.addEventListener("DOMContentLoaded", function (event) {
"use strict";
const mytap = (window.ontouchstart === null) ? 'touchstart' : 'click';
const btn1 = document.getElementById('btn1');
const btn2 = document.getElementById('btn2');
const btn3 = document.getElementById('btn3');
const btn4 = document.getElementById('btn4');
const btnM1 = document.getElementById('btnM1');
const btnM2 = document.getElementById('btnM2');
const btnM3 = document.getElementById('btnM3');
const btnM4 = document.getElementById('btnM4');
const alertPlaceholder1 = document.getElementById('liveAlertPlaceholder1');
const alertPlaceholder2 = document.getElementById('liveAlertPlaceholder2');
const alertPlaceholder3 = document.getElementById('liveAlertPlaceholder3');
const alertPlaceholder4 = document.getElementById('liveAlertPlaceholder4');
const alert = (message, type, placeholder) => {
const wrapper = document.createElement('div')
wrapper.innerHTML = [
`<div class="alert alert-${type} alert-dismissible" role="alert">`,
` <div>${message}</div>`,
' <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>',
'</div>'
].join('');
placeholder.append(wrapper);
}
btn1.addEventListener('touchend', (e) => {
alert('event: ' + e.type, 'success',alertPlaceholder1);
console.log(e.type);
});
btn2.addEventListener('click', (e) => {
alert('event: ' + e.type, 'success', alertPlaceholder2);
console.log(e.type);
});
btn3.addEventListener(mytap, (e) => {
alert('event: ' + e.type, 'success', alertPlaceholder3);
console.log(e.type);
});
btn4.addEventListener('touchstart', (e) => {
alert('event: ' + e.type, 'success', alertPlaceholder4);
console.log(e.type);
});
btnM1.addEventListener('touchend', (e) => {
alert('event: ' + e.type, 'success',alertPlaceholder1);
console.log(e.type);
});
btnM2.addEventListener('click', (e) => {
alert('event: ' + e.type, 'success', alertPlaceholder2);
console.log(e.type);
});
btnM3.addEventListener(mytap, (e) => {
alert('event: ' + e.type, 'success', alertPlaceholder3);
console.log(e.type);
});
btnM4.addEventListener('touchstart', (e) => {
alert('event: ' + e.type, 'success', alertPlaceholder4);
console.log(e.type);
});
});The buttons are available twice. One for mobile and one for desktop.
I hope that someone can help me here, because I am desperate.
