iOSのみダブルタップが必要

締切済

質問者：Mypetwanwan
質問日時：2024/04/01 15:27
回答数：1件

２つの背景画像を切り替えるスクリプトを一つのページに設定しており、どちらも別のページに設置すると、iPhoneでも正常に動作するため、競合を疑っています。
おかしな挙動をするのは下記コードのfunction gazou(n){
のみです。ボタンをダブルタップする必要があり、ワンタップで機能しません。Androidとパソコンでは正常に動きます。お分かりになる方いらっしゃいますでしょうか。chatGPTにも聞いてみましたが解決せずで困っております。
よろしくお願い致します。

【javascript】
function gazou(n){

if(n==0)
document.body.style.backgroundImage="url(bg1.jpeg)";
if(n==1)
document.body.style.backgroundImage="url(bg2.jpeg)";
if(n==2)
document.body.style.backgroundImage="url(bg3.jpeg)";
if(n==3)
document.body.style.backgroundImage="url(bg4.jpeg)";
if(n==4)
document.body.style.backgroundImage="url(bg5.jpeg)";
if(n==5)
document.body.style.backgroundImage="url(bg6.jpeg)";
if(n==6)
document.body.style.backgroundImage="url(bg7.jpeg)";
if(n==7)
document.body.style.backgroundImage="url(bg8.jpeg)";
if(n==8)
document.body.style.backgroundImage="url(bg9.jpeg)";
if(n==9)
document.body.style.backgroundImage="url(bg10.jpeg)";
if(n==10)
document.body.style.backgroundImage="url(bg11.jpeg)";
}

【html】
<form name="henkou">
<input type="button" value="A" onclick="gazou(0)">
<input type="button" value="B" onclick="gazou(1)">
<input type="button" value="C" onclick="gazou(2)">
<input type="button" value="D" onclick="gazou(3)">
<input type="button" value="E" onclick="gazou(4)">
<input type="button" value="F" onclick="gazou(5)">
<input type="button" value="G" onclick="gazou(6)">
<input type="button" value="H" onclick="gazou(7)">
<input type="button" value="I" onclick="gazou(8)">
<input type="button" value="J" onclick="gazou(9)">
<input type="button" value="K" onclick="gazou(10)">
</form>
<button onclick="mybg()">ボタンの文字</button>

<script>
const arr = ["gazou1.webp","gazou2.webp","gazou3.webp"];
let cnt = 0;
function mybg() {
const bodys = document.querySelectorAll('main');
bodys[0].style.backgroundImage = 'url(' + arr[ cnt % arr.length ] + ')';
cnt++;
}
</script>

【CSS】
body {
background-color: transparent!important;
background-repeat: no-repeat!importan;
background-position: center center!important;
background-size: cover!important;
background-attachment: fixed!important;
}
.main {
background-color: transparent!important;
border-color:transparent!important;
background:url("gazou3.webp");
background-repeat: no-repeat;
background-position: center center!important;
background-size: contain!important;
position:relative!important;
background-attachment: fixed!important;
height:150vh!important;
}