パラメータを渡してのページ遷移

ページ遷移をする時にパラメータを渡す方法と受け取る方法です。

元のページ　aa01.html
![page_feb1501.png](https://qiita-image-store.s3.amazonaws.com/0/179446/0fd3966c-0848-2630-f9d5-298b2a863f3a.png)

クリックして遷移したページ bb01.html
![page_feb1502.png](https://qiita-image-store.s3.amazonaws.com/0/179446/3636a8e2-0e10-dbbd-25fb-7834108ab62f.png)

ページのソース

```html:aa01.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="button_click_monitor.js"></script>
<title>aa01</title>
</head>
<body>
<button id='m_500'>500 M</button>
<button id='m_1000'>1000 M</button>
<button id='m_1500'>1500 M</button>
<button id='m_3000'>3000 M</button>
<hr />
<div id="outarea_aa">outarea_aa</div>
<div id="outarea_bb">outarea_bb</div>
<div id="outarea_cc">outarea_cc</div>
<div id="outarea_dd">outarea_dd</div>
<div id="outarea_ee">outarea_ee</div>
<div id="outarea_ff">outarea_ff</div>
<div id="outarea_gg">outarea_gg</div>
<div id="outarea_hh">outarea_hh</div>
<hr />
Feb/15/2018<p />
</body>
</html>
```

```js:button_click_monitor.js
// -------------------------------------------------------------------
//	button_click_monitor.js
//
//					Feb/15/2018
//
// -------------------------------------------------------------------
jQuery(function()
{
	jQuery('#outarea_aa').text("*** button_click_monitor.js *** start ***")

	button_click_monitor ()

	jQuery('#outarea_hh').text("*** button_click_monitor.js *** end ***")
})

// -------------------------------------------------------------------
// [8]:
function button_click_monitor ()
{
	jQuery ("button").click (function ()
		{
		window.location.href = "bb01.html" + "?id=" + this.id
		})
}

// -------------------------------------------------------------------
```

遷移先のページ

```html:bb01.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="bb01.js"></script>
<title>bb01</title>
</head>
<body>
<select id="category" name="種目">
	<option value="">種目をお選びください</option>
	<option value="m_500">500 M</option>
	<option value="m_1000">1000 M</option>
	<option value="m_1500">1500 M</option>
	<option value="m_3000">3000 M</option>
</select>
<hr />
<div id="outarea_aa">outarea_aa</div>
<div id="outarea_bb">outarea_bb</div>
<div id="outarea_cc">outarea_cc</div>
<div id="outarea_dd">outarea_dd</div>
<div id="outarea_ee">outarea_ee</div>
<div id="outarea_ff">outarea_ff</div>
<div id="outarea_gg">outarea_gg</div>
<div id="outarea_hh">outarea_hh</div>
<hr />
Feb/15/2018<p />
</body>
</html>
```

```js:bb01.js
// -------------------------------------------------------------------
//	bb01.js
//
//					Feb/15/2018
//
// -------------------------------------------------------------------
function getParam()
{
	var url   = location.href
	parameters    = url.split("?")
	params   = parameters[1].split("&")
	var paramsArray = []
	for ( it = 0; it < params.length; it++ ) {
		neet = params[it].split("=")
		paramsArray.push(neet[0])
		paramsArray[neet[0]] = neet[1]
		}
	var categoryKey = paramsArray["id"]
	return categoryKey
}

// -------------------------------------------------------------------
jQuery(function()
{
	jQuery('#outarea_aa').text("*** bb01.js *** start ***")

	const idx = getParam()

	var str_tmp = ""
	str_tmp += "Getパラメータ「id」の値は、"+  idx  +" です。<br />"
	jQuery('#outarea_bb').html(str_tmp)

	const value = idx

	jQuery("#category").val(value)

	jQuery('#outarea_hh').text("*** bb01.js *** end ***")
})

// -------------------------------------------------------------------
```