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
-
CSSデータの作成方法について(FTP内)
HTML・CSS
-
-
4
php配列のキーの二重定義 $a['zero'],$a['iti']と$a[0],$a[1]とが同等
PHP
-
5
以下のURL入れますか?皆さんは↓
AJAX
-
6
PythonのTkinter詳しい方へ。画像や言葉の意味を答える3択クイズを作るのに手間取っています
その他(プログラミング・Web制作)
-
7
HTMLとJavaScriptで作ったタイマーアプリが正常に動作しない
JavaScript
-
8
卒業研究でよく分からないところがあるので教えて欲しいです。 インバータ用組み込みソフトウェア開発シス
C言語・C++・C#
-
9
Pythonでターミナルに文字を出力する命令を出せるprintが予約語でないのは何故ですか。予約語は
その他(プログラミング・Web制作)
-
10
C言語の関数と配列に関する質問
C言語・C++・C#
-
11
テーブルの行を折りたたみたいのですが、detailsタグとsummaryタグを使ってもうまくいきませ
HTML・CSS
-
12
Javascriptエラーの原因が分からない
JavaScript
-
13
質問失礼します。 プログラム言語を一つも知らないのですが、C♯の勉強をしてみたいです。おすすめの教材
C言語・C++・C#
-
14
なんでブラウザでPHPを動かすためだけにOSにPython2(Python3)を入れて、C(GCC)
PHP
-
15
jsで質問です。 displayプロパティを用いて下記の情報4〜6のtrタグをボタンで表示・非表示を
JavaScript
-
16
htmlで<form>~</form>を並べて記述すると一行置きに記述されてしまうのですがこれを回避
HTML・CSS
-
17
システムエンジニアの適正について
C言語・C++・C#
-
18
息子は中学1年軽度知的障害があります。勉強は同じ内容を学校をしています。語彙力やコミュニケーション力
教育ソフト・学習ソフト
-
19
どちのほうがすきですか?
C言語・C++・C#
-
20
テーブルのセルデータを自動改行させずに、はみ出た部分は切り捨てたい
HTML・CSS
関連するカテゴリからQ&Aを探す
おすすめ情報
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
テキストエリアの行頭行末に指...
-
onchangeイベントを強制的に発...
-
jQueryで設定したイベントハン...
-
追加ボタンを押した際に ok ボ...
-
計算の結果、整数でも小数点以...
-
IEで,テキストエリアの選択範...
-
【javascript】ボタンクリック...
-
【UWSC】HTML内のある部分を抽...
-
3つのselectでURLパラメータを...
-
ボタン無しでフォーム内容送信
-
return trueとreturn falseの用...
-
正規表現で複数マッチ条件で悩...
-
クリックされた罫表セルの行番...
-
iframe内のformをサブミットす...
-
jQueryで特定のチェックボック...
-
引数に数値、文字列の混在
-
複数のプルダウンを1つにまとめ...
-
一つのチェックボックスのON/OF...
-
送信フォームで送信ボタンをお...
-
ボタン押下すると一行テキスト...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
onchangeイベントを強制的に発...
-
JavascriptでDOM-based XSSの発...
-
onclickが動作しない
-
クリックさせたいが、click()が...
-
追加ボタンを押した際に ok ボ...
-
innerHTML内では改行は禁止?
-
ボタンかリンクをクリックする...
-
formのfileの値をhiddenでも持...
-
javaScriptの変数をJavaの変数...
-
JavaScriptのfileオブジェクト...
-
VB.NETで<Input>タグ、<text...
-
受け取ったパラメータが文字化け
-
JQueryでfunctionに引数としてI...
-
javascriptで作成されたテーブ...
-
jQueryで設定したイベントハン...
-
開いた子ウィンドウにあるボタ...
-
コードレビューをお願いします。
-
ボタンをクリックするとテキス...
-
BackSpaceしたい(QNo.2734284の...
-
URL 判定
おすすめ情報
自己解決しました。Wordpressの固定ページに設置したため、テーマのjsとコンフリクトしていた様です。このページだけ初期ドメインに移動させて解決しました。解決済みにしたいのですがやり方がわからないので放置します。