常連

### 実行したいこと
タブ切り替えの中に、無限スワイプを加えたものを作りたい

上記形式のHTML・CSS・JavaScriptを教えてください。

現在、ECサイト（カートシステム:おちゃのこネット）を作成しており、この様な形式をサイトに反映させたいです。


### 補足情報
[リンク内容](https://www.peachjohn.co.jp/?bid=gsem_shimei_shamei_sp&gclid=EAIaIQobChMIzO7Tu_-S8QIVVKWWCh2i6QnjEAAYASAAEgIg3vD_BwE)

上記ピーチジョンのサイト真ん中にある様な、タブ切り替えと無限スワイプのものを作りたいです。


### 試したこと
ピーチジョンのサイトを検証モードで見ましたが、HTMLは見つけらましたが、JavaScriptと CSSは見つけれませんでした。

タブ切り替えの中に、無限スワイプを加えたものを作りたい

### 前提・実現したいこと

フォームの送信ボタンを押すと非同期で情報を送信し、正しく送信できれば、サンクスページに遷移するお問合せフォームがあるのですが、
非同期処理中に時間がかかるのでロードアニメーションを実装したい

### 発生している問題・エラーメッセージ
ロードアニメーションの実行タイミングがずれる

送信ボタンをクリックし、サンクスページに遷移するまで、また、エラーメッセージがアラートされるまでの間ローディングアニメーションを処理させたいのですが、下記では、アニメーションが表示されない、エラーがアラートされ、アラートを消した後にアニメーションが発火するといったタイミングになっています。
```
$(function() {
		var xhr = new XMLHttpRequest();
		var send_flag = false;
		xhr.onreadystatechange = function() {
      console.log('hi');
      
      console.log('hide');
			switch ( xhr.readyState ) {
			case 0:
				console.log( '未初期化' );
				break;
			case 1:
        　　　　　　　　　　　　$("#pageloader").fadeIn();
				console.log( '送信中' );
				break;
			case 2:
				console.log( '待ち' );
				break;
			case 3:
				console.log( '受信中:'+xhr.responseText.length+' bytes.');
				break;
			case 4:
				console.log('受信完了');
        
				_returnValues = JSON.parse(xhr.responseText);
				console.log(_returnValues);
				if(xhr.status == 200) {
					location.href = './complete.html';
				} else {
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　$("#pageloader").fadeOut();
					alert("エラーが発生しました。\n" + _returnValues.message);
				}
				break;
			}
		};



　　　　　　　　　　　　　　var data = JSON.stringify({
				companyName: document.getElementById('company').value,
				name: document.getElementById('name').value,
				email: document.getElementById('email').value,
				phoneNumber: document.getElementById('tel').value,
				desiredAmount: document.getElementById('price').value
			});
			console.log(data);
			xhr.open('POST','https://url', false );
			xhr.setRequestHeader( 'Content-Type', 'application/json' );
			xhr.send(data);
			return false;
		});
	});
```


### 補足情報（FW/ツールのバージョンなど）

$("#pageloader").fadeIn();でアニメーションを表示し
$("#pageloader").fadeOut();で終了しよとしています。

非同期処理中の良いタイミングでアニメーションが発火できるよう何かアドバイスをいただければ幸いです。
よろしくお願いします。

フォームの非同期送信時にロードアニメーションを実装したい

### 前提・実現したいこと

html内の<input>の値をjsを用いて設定する拡張機能を作成しています。
ページ内にあるinputに値を入力し、ブラウザを閉じ、再度そのページを開いた際に<input>の値を入力した値に書き換えたいです。
また、ページ内のinputに値が入力されなかった場合は適用されないようにしたいです。

ですがエラーになってしまいます。
https://lab.syncer.jp/Web/JavaScript/Snippet/29/
こちらを参考にしてみましたが、下記のエラーがでてきます。

### 発生している問題・エラーメッセージ
Uncaught TypeError: Cannnot set property ”value" of null at main.js:1

### 該当のソースコード

```main.js
document.getElementById("inputID").value = "50";
```

```main.html
<form id = "formID">
 <input type="number" class = "TiffOne-input-button" value="10" id="inputID"/>
</form>
```
### 試したこと

main.jsの
document.getElementById("inputID").value = "50";
を
document.forms.formID.inputID.value = "50";
に変更してもダメでした。
変更するとこのようなエラー分になりました。
Uncaught TypeError: Cannot error property "inputID" of undefined at main.js:1

### 補足情報（FW/ツールのバージョンなど）
Edge(chromium版）拡張機能です。

input valueの値をjsでセットしたい

スマホの表示時に縦並びにした画像を横幅いっぱいに広げたいです。

メディアクエリのmax-width:600px;が効かないのはなぜでしょう。。
HMTLのimgに画像のサイズを指定しているのがよくないのでしょうか。

ご教授お願い致します！


```HTML
　　　　<div class="bicycle">
            <div class="con">
                <div class="con2">
                    <img src="img/bicycle1.jpg" width="268px" height="176px" alt="テキストテキストテキスト">
                    <h3>タイトルタイトル</h3>
                    <p>テキストテキストテキスト</p>
                </div>

                <div class="con2">
                    <img src="img/bicycle2.jpg" width="268px" height="176px" alt="テキストテキストテキスト">
                    <h3>タイトルタイトル</h3>
                    <p>テキストテキストテキスト</p>
                </div>

                <div class="con2">            
                    <img src="img/bicycle3.jpg" width="268px" height="176px" alt="テキストテキストテキスト">
                    <h3>タイトルタイトル</h3>
                    <p>テキストテキストテキスト</p>
                </div>
            </div>
        </div>
```

```CSS
.bicycle .con{
    display: flex;
    justify-content: center;
    align-items: center;
}

.bicycle .con2{
    width: 268px;
    margin-right: 17px;
    text-align: center;
} 


@media(max-width:600px ){
    .bicycle .con{
        flex-direction: column;
    }

    .bicycle .con2{
        max-width: 600px;
        height: 100%;
        margin-right: 0;
        margin-bottom: 30px;
    }
}
```