2つの背景画像を切り替えるスクリプトを一つのページに設定しており、どちらも別のページに設置すると、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;
}
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript javascriptのエラーで質問です。 2 2024/02/03 18:52
- JavaScript プログラムがうまく動きませんレビューお願いします 1 2022/07/10 05:08
- HTML・CSS CSSが効かずどのように指定すれば良いか分からないのでアドバイスお願い致します 2 2023/06/07 12:25
- JavaScript コードレビューをお願いします。 1 2022/07/16 05:38
- JavaScript HTMLとJavaScriptで作った表示して検索するWebアプリが正常に動かない 3 2024/01/05 17:48
- JavaScript JavaScriptで作ったアプリが正常に動作しない。改善したい。 3 2024/01/06 16:33
- JavaScript vertical sliderをautoplayしたい 2 2022/08/25 14:47
- JavaScript HTMLとJavaScriptで作ったタイマーアプリが正常に動作しない 7 2023/12/15 19:32
- JavaScript javascriptのちょっとした動作不良(原因は突き止めたのですが) 1 2023/06/15 19:58
- JavaScript javascript作成してます。ラジオボタンで判定するコードを書いてます。 1 2023/07/18 11:03
このQ&Aを見た人はこんなQ&Aも見ています
-
プロが教える店舗&オフィスのセキュリティ対策術
中・小規模の店舗やオフィスのセキュリティセキュリティ対策について、プロにどう対策すべきか 何を注意すべきかを教えていただきました!
-
PythonやJavaScriptのように実質的に数の桁数を無限に扱える言語と、全く無限に使えない言
JavaScript
-
htmlの修正方法を教えていただきたいです。
HTML・CSS
-
Javascriptエラーの原因が分からない
JavaScript
-
-
4
CSSデータの作成方法について(FTP内)
HTML・CSS
-
5
php配列のキーの二重定義 $a['zero'],$a['iti']と$a[0],$a[1]とが同等
PHP
-
6
以下のURL入れますか?皆さんは↓
AJAX
-
7
プログラミングを教えたいです。そういうSNSないですか?
その他(プログラミング・Web制作)
-
8
PHPでこのコード自体に意味は無いんですけど、上のifと下のifの違いってなんですか?個人的には下の
PHP
-
9
PHPとHTML+Xamppの掲示板で画像も投稿できるように
PHP
-
10
40代後半でゼロからのプログラム業界への転職
その他(プログラミング・Web制作)
-
11
だれがとけるの?
C言語・C++・C#
-
12
PythonのTkinter詳しい方へ。画像や言葉の意味を答える3択クイズを作るのに手間取っています
その他(プログラミング・Web制作)
-
13
HTMLとJavaScriptで作ったタイマーアプリが正常に動作しない
JavaScript
-
14
卒業研究でよく分からないところがあるので教えて欲しいです。 インバータ用組み込みソフトウェア開発シス
C言語・C++・C#
-
15
HTMLで作った時報アプリが動きません
JavaScript
-
16
C言語の関数と配列に関する質問
C言語・C++・C#
-
17
Pythonでターミナルに文字を出力する命令を出せるprintが予約語でないのは何故ですか。予約語は
その他(プログラミング・Web制作)
-
18
質問失礼します。 プログラム言語を一つも知らないのですが、C♯の勉強をしてみたいです。おすすめの教材
C言語・C++・C#
-
19
テーブルの行を折りたたみたいのですが、detailsタグとsummaryタグを使ってもうまくいきませ
HTML・CSS
-
20
htmlで<form>~</form>を並べて記述すると一行置きに記述されてしまうのですがこれを回避
HTML・CSS
関連するカテゴリからQ&Aを探す
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
onchangeイベントを強制的に発...
-
追加ボタンを押した際に ok ボ...
-
onclickが動作しない
-
JavaScriptのfileオブジェクト...
-
JSのボタンを複数う使うには
-
プルダウンで選択したページに...
-
javascriptでtextareaに文字列...
-
javaScriptの変数をJavaの変数...
-
ボタンかリンクをクリックする...
-
クリック→テキストボックスに追加
-
クリックさせたいが、click()が...
-
formのfileの値をhiddenでも持...
-
入力フォームにテキストを追加
-
金額に3桁ごとにカンマを入れた...
-
onClickがinput type="image"だ...
-
Googleモバイル検索の検索結果...
-
return trueとreturn falseの用...
-
jQuery セレクトボックスで選択...
-
value内に変数を入れたい
-
iframe内のformをサブミットす...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
onchangeイベントを強制的に発...
-
クリックさせたいが、click()が...
-
onclickが動作しない
-
追加ボタンを押した際に ok ボ...
-
javaScriptの変数をJavaの変数...
-
innerHTML内では改行は禁止?
-
formのfileの値をhiddenでも持...
-
ボタンかリンクをクリックする...
-
JavaScriptのfileオブジェクト...
-
onClickがinput type="image"だ...
-
javascriptで作成されたテーブ...
-
開いた子ウィンドウにあるボタ...
-
コードレビューをお願いします。
-
ボタンをクリックするとテキス...
-
ポップアップブロックにならな...
-
VB.NETで<Input>タグ、<text...
-
ボタンをクリックして文字を置...
-
テキストフィールド未入力の場...
-
URL 判定
-
javascriptでtextareaに文字列...
おすすめ情報
自己解決しました。Wordpressの固定ページに設置したため、テーマのjsとコンフリクトしていた様です。このページだけ初期ドメインに移動させて解決しました。解決済みにしたいのですがやり方がわからないので放置します。