常連

```html
<input type="range" name="count" min="0" max="20" value="8" id="count">
```
```javascript
const count = document.getElementById("count");

count.addEventListener('change', () => {
  console.log(this.count.value);
});
```
Javascript初心者です。フォームの値を取得して、フロントエンドでのバリデーションの練習をしたいと思っています。`addEventListener`内での`this`の実体は`count`だと思っていたのですが、`console.log(this)`をしてみると`Window index.html`であることがわかり、上記のように`this.count.value`とすることで想定通りの結果を得ることができました。
`const`をした時点で`document.`としているので、`addEventListener`内でも`this`の実体が`count`とならないのはなんとなく理解できたのですが、どうも直感的でない気がします。質問したいことは、なんらかコードを変えることによって、`this`の実体が`count`を指すようにし、以下のようなコードで想定通りの結果を得ることができるかどうかをお聞きしたいです。
```javascript
const count = document.getElementById("count");

count.addEventListener('change', () => {
  console.log(this.value);
});
```

質問がわかりにくいかもしれませんが、よろしくお願い致します。

Javascript : thisの実体について

初心者のため、説明が足りないこともあるかと思いますが、どうぞご教示ください。

目標は下記のサイトの横並び画像のように、画像にマウスオーバーすると、画像が要素内で拡大し、マウスについてくるようなエフェクトにしたいです。
http://www.allt.sk/

様々なサイト様が公開している記述を拝見し、どうにかテストの状態までたどり着きましたが、
下記2点どうしてもわかりません。

1）マウスアウト時の挙動がスムーズにならない
2）テキストにhoverした時に、画像拡大・マウス追従しなくなる

▼テスト
http://sample01.studio-goblin.com/
▼参考させていただいたサイト
http://memocarilog.info/jquery/5745

アドバイスいただければ幸いです。
お導きのほど、よろしくお願いします。
（当方、jsは全く初心者です）

```html
<div id="hogeHoge01" class="hogeHoge"><div id="homPanel01" class="homPanelIndex"><a href="/experience/index.html"><p><img src="assets/img/FS021_L.jpg"></p><span>テキストテキストテキスト</span></a></div></div>

```
```css
.hogeHoge {
text-align: center;
position: relative;
z-index: 2;
color: #333;
outline: none;
overflow: hidden;
}
.hogeHoge a {
 width: 100%;
 display: block;
 text-align: center;
 position: absolute;
 color: #333;
 font-weight: bold;
 outline: none;
}
.hogeHoge:hover a,
.hogeHoge a:hover {
  color: #000;
  text-decoration: none;
  opacity: 1 !important;
}

.hogeHoge::before,
.hogeHoge::after {
	position: absolute;
	z-index: -1;
	display: block;
	content: '';
}
.hogeHoge,
.hogeHoge::before,
.hogeHoge::after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-transition: all .5s;
	transition: all .5s;
}
.hogeHoge:hover,
.homPanelIndex a:hover,
.homPanelIndex a img:hover {
	color: #000;
 opacity: 1 !important;
}
.hogeHoge::after {
 top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
}
.hogeHoge:hover::after {
 top:0;
	left: 0;
	background: #fff;
}

.homPanelIndex{
 position: relative;
 overflow: hidden;
}
.homPanelIndex p {
 position: absolute;
 top: -15px;
 left: -40px;
}
.homPanelIndex p img {
 height: 140%;
 width: auto;
 position: absolute;
 z-index: 444;
 left: -20px;
 top: -20px;
 -moz-transition: -moz-transform 0.5s linear;
 -webkit-transition: -webkit-transform 0.5s linear;
 -o-transition: -o-transform 0.5s linear;
 -ms-transition: -ms-transform 0.5s linear;
 transition: transform 0.5s linear;
}
.homPanelIndex p:hover img {
 -webkit-transform: scale(1.1);
 -moz-transform: scale(1.1);
 -o-transform: scale(1.1);
 -ms-transform: scale(1.1);
 transform: scale(1.1);
 transition: all .5s;
	-webkit-transition: all .5s;
}
.homPanelIndex span {
 position: relative;
 z-index: 555;
}
```
```javaScript
$(function(){
var thisObj = $('#homPanel01');
if (thisObj.length == 0) return false;
 var item = thisObj[0];
 var liWidth = $(' a > p', item).width()
 var liHeight = $('a > p', item).height()   
 var ulWidth = thisObj.width();
 var ulHeight = thisObj.height();
 var offset_x = liWidth - ulWidth;
 var offset_y = liHeight - ulHeight;
 var itemLi = thisObj.find('p');
thisObj.mousemove(function(e){
 var cursorX = e.clientX - thisObj.offset().left;
 (cursorX > ulWidth) ? cursorX = ulWidth : cursorX ;                
 var centerX = (cursorX / ulWidth * offset_x) - offset_x / 2 ;
 var cursorY = e.clientY - thisObj.offset().top + $('html').scrollTop();
 (cursorY > ulHeight) ? cursorY = ulHeight : cursorY ;                
 var centerY = (cursorY / ulHeight * offset_y) - offset_y / 2;   
 // li要素を移動させるループ ========    
for (var i=1; i<= itemLi.length; i++){
    var liLeft = parseFloat($(itemLi[i-1]).css('left'));
    var newLeft = centerX * (i / itemLi.length) - offset_x / 2;
    $(itemLi[i-1]).css('left', (newLeft + liLeft*5) / 10); 
                 
// Y方向の移動処理
    var liTop = parseFloat($(itemLi[i-1]).css('top'));
    var newTop = centerY * (i / itemLi.length) - offset_y / 2;
    $(itemLi[i-1]).css('top', (newTop + liTop*5) / 10);
        }
    }); 
  $("#homPanel01").mouseout(function(){
      $("#homPanel01 a > p").css('left','-' + 15 + 'px').css('top', '-' + 10 + 'px'); 
  }); 
   });
});
```

良い方法がありましたらご教示いただきたく思います。
どうぞよろしくお願いします。

要素内で画像を拡大・マウス追従

###前提・実現したいこと
初めて質問します。
当方初心者のwebデザイナーで、コードについてはHTMLとCSSがようやくわかってきた程度です。
恥ずかしながら勉強が追いついていない、javascriptについての質問をさせてください。

現在、HTML5とCSS3をメインにwebサイトを作っています。
画像をフラッシュのように動的に切り替える要望に応えるため、初めてjavascriptの
ライブラリ（[transm.js](http://www.netzgesta.de/transm/)）を使用しています。

つまづいているのは、このjavascriptで制御している画像のレスポンシブ対応です。

###発生している問題
ウィンドウ幅に画像サイズを合わせるため、ウィンドウ幅によってjsファイルを呼び変える
コードをどこに書けばいいのかを知りたいです。

自分なりにネット検索で調べたところ、画像サイズを指定しているjsファイルを２つ追加
（PC、タブレット、スマホで切り替える為）し、ウィンドウ幅に合わせて呼び替えるという
方法にたどり着きました。

スニペットも上げてくださっている方がおりましたので、以下の通り拝借したのですが、
これをどのファイルのどこに書き込めばいいのかがわかりません。。。

###該当のソースコード
``````ここに言語を入力

<script type="text/javascript">
jQuery(document).ready(function($) {
	//PC環境の場合
	if (window.matchMedia( '(min-width: 769px)' ).matches) { //切り替える画面サイズ
		$.ajax({
			url: 'js/pc.js', //PC用の画像サイズが指定されたファイル
			dataType: 'script',
			cache: false
	   });
	//モバイル環境の場合
	} else {
	    $.ajax({
			url: 'js/sp.js', //モバイル用の画像サイズが指定されたファイル
			dataType: 'script',
			cache: false
		});
	};
});
</script>
```

###試したこと
画像サイズが書かれたファイルはHTMLのhead内に記載することになっていたので、
同じ位置に書き込みました。
結果、画像が表示されるはずの位置が空白になりました。

###補足情報(言語/FW/ツール等のバージョンなど)
勉強不足な上初めての質問で、要点が伝えられているか心配です。
社内に詳しい人がおらず、一人で頭を抱えている状況ですので、
アドバイスいただけますと非常に有難いです。。。

どうぞ宜しくお願い致します。

追記：モバイル用のコードです。
（かなり長いコードなので、サイズ指定しているあたりだけ記載します）
プラグインは４つのjsファイルがあり、それぞれ
「どの画像を使うか」「defaultのサイズや時間の規定」「動き方の指定？（画像を切り替える動きが多数入っています）」「こちらも動き方？（buffer:1,mask:0,alpha:0などと言う記述）」 です。（よくわかっておりません。。）

以下コードは、そのうちの「defaultのサイズや時間の規定」の一部です。
defaultWidth:720,defaultHeight:270 を編集することで画像サイズが指定できたので、このファイルをPC用、タブレット用、スマホ用に作り、ウィンドウ幅によって読み替えられたら解決しそう！という発想です・・・。

画像そのものは、同一のものを縮小で使用できればと考えていますが、
必要であれば各サイズごとに作成します。

```ここに言語を入力
var transm = { version : 1.2, released : '2010-08-10 12:00:00', 
	defaultWidth:720,defaultHeight:270,defaultRadius:0,defaultName:null,defaultData:null,defaultCallback:null,defaultLayer:null,defaultAutoplay:0,defaultPingpong:0,default〜
```

javascriptで制御した画像のレスポンシブ対応について

現在keyイベントでfalseを返して試しているのですが、半角入力状態なら入力ができない状態になるのに、Enterで確定する前の入力変換中(全角入力の波線状態)の場合は文字が入力できてしまいます。
この、入力変換中の全角入力をキャンセルできる手段をご存知の方がいらっしゃいましたらご教授ください。

以下実験しているコードです。

```ここに言語を入力
$('#input_id').on('keydown', function (e) {

            var inputVal = $('#input_id').val();

            if (inputVal.length >= 15)
            {
                if ((e.which && e.which === 37) || (e.keyCode && e.keyCode === 37)) {
                    return true;
                }
                else if ((e.which && e.which === 39) || (e.keyCode && e.keyCode === 39)) {
                    return true;
                }
                else if ((e.which && e.which === 9) || (e.keyCode && e.keyCode === 9)) {
                    return true;
                }
                else if ((e.which && e.which === 8) || (e.keyCode && e.keyCode === 8)) {
                    return true;
                }
                else if ((e.which && e.which === 13) || (e.keyCode && e.keyCode === 13)) {
                    return true;
                }
                else {
                    return false;
                }
            }
});
```

[javascript]入力変換中の全角入力をキャンセル

###実現したいこと
<div class="row">内の<img>のオリジナルのサイズを取得して、
横幅がの方が大きい画像を読み込んでいる場合の<img>タグには、
.width_max{ width:100%; }
というクラスを振り、
縦幅がの方が大きい画像を読み込んでいる<img>タグには、
.height_max{ height: 100%; }
というクラスを振るような動作を
javascriptで制御したいと思っております。
どうぞよろしくお願いいたします。

###該当のソースコード
<div class="row">

<div class="column">
	<div class="area-image">
		<img src="img/" alt="">
	</div>

	<div class="area-text">
		<p class="model-number">XXXXXXXX<br>
		<span class="launch-date">XXXXXXXX</span></p>
	</div>
</div>

<div class="column">
		<div class="area-image">
			<img src="img/" alt="">
		</div>
				<div class="area-text">
	<p class="model-number">XXXXXXXX<br>
	<span class="launch-date">XXXXXXXX</span></p></div>
</div>

<div class="column">
		<div class="area-image">
			<img src="img/" alt="">
		</div>
				<div class="area-text">
	<p class="model-number">XXXXXXXX<br>
	<span class="launch-date">XXXXXXXX</span></p></div>
</div>
</div>
###条件
１、テンプレートページとなるため、
どのような画像のサイズが入ってくるかはわかりません。

２、場合によっては小さいサイズの画像は拡大表示させることも想定していますが、
縦横の比率は維持して表示させたいです

３、<div class="area-image">には
width: 210px; height: 130px;
と、最大のサイズは決まっております。

画像のサイズを取得して、条件によって割り当てるクラスを変える

こんにちは。
htmlでクリックで展開する折りたたみメニューを作りたいです。
さきにsvgで作ったものの中に追加したいのですがうまくいきません。

助けてください。


```html
<!DOCTYPE html>
<html lang="ja">
<head>
			<meta charset="utf-8">
			<meta name="description" content="若手俳優の共演まとめです。">
			<title>共演者まとめ</title>
				<p>若手俳優がいつだれと共演したのかまとめました。</p>
		<p><a href="ksts.html">くわしく</a>
		</p>
		
		
		
<div onclick="obj=document.getElementById('open').style; obj.display=(obj.display=='none')?'block':'none';">
<a style="cursor:pointer;">古いベース</a>
</div>

 

<div id="open" style="display:none;clear:both;">


坂本さんは、加藤さんの使っていない古いベースをもらいました。
</div>





<class onclick="obj=document.getElementById('open active').style; obj.display=(obj.display=='none')?'block':'none';">
<a style="cursor:pointer;">手作りのウクレレ</a>
</class>

 

<class id="open active" style="display:none;clear:both;">


加藤さんにもらったベースのお返しにウクレレをプレゼントする坂本さん。しかも、手作り。ちゃっかり自分の分も作っておそろいにしています。加藤さんに「そんなことに時間をつかっちゃだめだよ。」と言われる始末。
</class>


			
		</head>
		<svg version="1.1" id="レイヤー_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"

	 y="0px" viewBox="0 0 960 560" style="enable-background:new 0 0 960 560;" xml:space="preserve">

<style type="text/css">

	.st0{fill:none;stroke:#666666;stroke-miterlimit:10;}

	.st1{fill:#666666;}

	.st2{font-family:'BanglaSangamMN';}

	.st3{font-size:8.1604px;}

	.st4{fill:none;}

	.st5{fill:#4D4D4D;}

	.st6{font-family:'KozGoPr6N-Regular-83pv-RKSJ-H';}

	.st7{font-size:12px;}

	.st8{letter-spacing:3;}

	.st9{font-size:8px;}

	.st10{font-size:9px;}

</style>

<polygon class="st0" points="446.6,195.5 474.4,244 446.6,292.5 391,292.5 363.2,244 391,195.5 "/>

<polygon class="st0" points="437.6,212.5 456.3,244.5 437.6,276.5 400,276.5 381.3,244.5 400,212.5 "/>

<polygon class="st0" points="530.2,147.5 558,195.5 530.2,243.5 474.6,243.5 446.8,195.5 474.6,147.5 "/>

<polygon class="st0" points="222,88.5 238.4,117 222,145.5 189.2,145.5 172.8,117 189.2,88.5 "/>

<polygon class="st0" points="799,85.5 815.4,114 799,142.5 766.2,142.5 749.8,114 766.2,85.5 "/>

<polygon class="st0" points="173,116.5 189.4,145 173,173.5 140.2,173.5 123.8,145 140.2,116.5 "/>

<text transform="matrix(1 0 0 1 383.8567 248.0538)" class="st1 st2 st3">Kazuki Kato</text>

<text transform="matrix(1 0 0 1 454.2719 199.5001)" class="st1 st2 st3">Shogo Sakamoto</text>

<rect x="502.4" y="311.7" class="st4" width="215.7" height="108.5"/>

<text transform="matrix(1 0 0 1 502.4126 322.3104)"><tspan x="0" y="0" class="st5 st6 st7">テニスの王子様</tspan><tspan x="0" y="21" class="st5 st6 st7">４代目 越前リョーマ</tspan><tspan x="0" y="42" class="st5 st6 st7">200</tspan><tspan x="19.8" y="42" class="st5 st6 st7 st8">7年</tspan><tspan x="44.4" y="42" class="st5 st6 st7">1</tspan><tspan x="51.1" y="42" class="st5 st6 st7 st8">2月</tspan><tspan x="75.7" y="42" class="st5 st6 st7">1</tspan><tspan x="82.3" y="42" class="st5 st6 st7 st8">2</tspan><tspan x="91.9" y="42" class="st5 st6 st7">日〜200</tspan><tspan x="135.7" y="42" class="st5 st6 st7 st8">9年5月</tspan><tspan x="185" y="42" class="st5 st6 st7">1</tspan><tspan x="191.6" y="42" class="st5 st6 st7 st8">0</tspan><tspan x="201.2" y="42" class="st5 st6 st7">日</tspan></text>

<text transform="matrix(1 0 0 1 254.4953 365.9998)"><tspan x="0" y="0" class="st5 st6 st7">テニスの王子様</tspan><tspan x="0" y="21" class="st5 st6 st7">初代 跡部景吾</tspan><tspan x="0" y="42" class="st5 st6 st7">200</tspan><tspan x="19.8" y="42" class="st5 st6 st7 st8">5年8月8</tspan><tspan x="78.7" y="42" class="st5 st6 st7">日〜200</tspan><tspan x="122.5" y="42" class="st5 st6 st7 st8">8年</tspan><tspan x="147.1" y="42" class="st5 st6 st7">1</tspan><tspan x="153.7" y="42" class="st5 st6 st7 st8">1月3</tspan><tspan x="188" y="42" class="st5 st6 st7">日</tspan></text>

<line class="st0" x1="530.2" y1="243.5" x2="558" y2="291.5"/>

<line class="st0" x1="362.8" y1="340.5" x2="390.6" y2="292.5"/>


<text transform="matrix(1 0 0 1 177.8253 120.5999)" class="st6 st9"><a style="cursor:pointer;">古いベース</a></text>

<class id="open active" style="display:none;clear:both;">


加藤さんにもらったベースのお返しにウクレレをプレゼントする坂本さん。しかも、手作り。ちゃっかり自分の分も作っておそろいにしています。加藤さんに「そんなことに時間をつかっちゃだめだよ。」と言われる始末。
</class>


<text transform="matrix(1 0 0 1 133.6138 140.1641)"><tspan x="0" y="0" class="st6 st9">手作りの</tspan><tspan x="0" y="14" class="st6 st9">ウクレレ</tspan></text>

<text transform="matrix(1 0 0 1 765.614 116.1641)" class="st6 st9">黒執事</text>

<g>

	<polygon class="st0" points="733,151.5 749.4,180 733,208.5 700.2,208.5 683.8,180 700.2,151.5 	"/>

	<text transform="matrix(1 0 0 1 701.6917 182.4341)" class="st6 st10">1789</text>

</g>

</svg>


	<body>
	</body>
</html>

```

htmlでクリックして展開する折りたたみメニューをつくりたい。

###svgアニメーションをhtmlに挿入したい
イラレで作ったsvgを[Lazy Line Painter](http://lazylinepainter.info/)というサイトでアニメーションに変換しました。ここで作ったファイルをhtmlに挿入したいのですが、どこにいれたらいいのかわかりません。

下のサイトを参考にしました。
[SVGとjQueryで絵を描いているようなアニメーションを実装する方法](http://liginc.co.jp/web/js/jquery/97697)

助けてください。


```html
<!DOCTYPE html>
<html lang="ja" dir="ltr">
<head>
<meta charset="UTF-8" />
<title>共演者まとめ</title>
<h1>共演者まとめ</h1>
				<p>若手俳優がいつだれと共演したのかまとめました。</p>

</head>
<body>
<div id="kkss3">
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="js/jquery.lazylinepainter-1.7.0.min.js"></script>
<script src="js/kkssillust.js"></script>
<script src="js/kkssscript.js"></script>

</body>
</html>
```

###kkssscript.js
```javascript
//SVG設定用
	var $svg_elems = $('#kkss3');
//$svg_elems.lazylinepainter(
  //{
    //"svgData": pathObj,
    //"strokeWidth": 2, //線の太さ
    //"strokeColor": "#fff" //線の色
  //}).lazylinepainter('paint');
 
  //かとべとしょごたんSVG
  $('#kkss3').lazylinepainter(
  {
  "svgData": pathObj,
  "strokeWidth": 3, //線の太さ
  "strokeColor": "#666666" //線の色
  }).lazylinepainter('paint');
```

###表示されているエラー
Error: <path> attribute d: Expected number, "M 446.6,195. L 474.4,244…".

jquery.js:7975 Error: <path> attribute d: Expected number, "M 437.6,212. L 456.3,244…".

Error: <path> attribute d: Expected number, "M 530.2,147. L 558,195.5…".

jquery.lazylinepainter-1.7.0.min.js:10 Uncaught TypeError: Cannot read property 'x' of undefined

svgでアニメーションをつくったのだが、htmlに挿入の仕方がわからない

###前提・実現したいこと
jQueryで、if構文、.hide().show()メソッドを使用し、タブ表示切替を実装したいですが、
想定の動きをしません。
.addclass()でcssの切替や、if構文以外の方法で実装も視野に入れてはいるのですが、
理解促進のため下記でなぜ動かないのか知りたいです。
JS自体始めたばかりです。

###発生している問題・エラーメッセージ
１回目の$('abc').clickでは想定通りいくのですが、
２回目の表示タブを戻す際の$('.Jsyllabary').clickが動作しません。

###該当のソースコード
```html
<ul class="list__Jsyllabary">
 <li>あいう<li/>
</ul>
<ul class="list__abc">
 <li>ABC<li/>
</ul>
<div>
 <span class="Jsyllabary">あ</span> | <span class="abc">A</span></p>
</div>

```

```JavaScript
var Jsyllabary = true;
$(function(){
	if ( Jsyllabary === true ){
		$('.list__abc').hide();
		$('.abc').click(function(){
			$('.list__abc').show();
			$('.list__Jsyllabary').hide();
			Jsyllabary = false;
	});
	} else {
		$('.Jsyllabary').click(function(){
			$('.list__Jsyllabary').show();
			$('.list__abc').hide();
			Jsyllabary = true;
	});
	}
});
```

###補足情報(言語/FW/ツール等のバージョンなど)
jQuery 3.0.0
HTML5

【jQuery】タブで二つの要素を切替表示

現在HTMLで↓のように

<body>
<div class="daruma"><div style="position:absolute;top:-20px;left:0px;">
<a href="リンク/"><img src="元の画像" border="0" onMouseOver="this.src='マウスオーバー時画像'" onMouseOut="this.src='マウスアウト時画像'" />
</a>
</div>


cssで↓のように
.daruma {
position: absolute; z-index: 2;
top: 0px;
left: 90px;
width: 96px;
height: 65px;
}

書いて画像リンクをしながらマウスオーバーをし、なおかつ位置を指定したいと思っているのですが、
リンク？の位置とマウスオーバー時の画像がずれてしまっているのか通常の画像しか表示されません。

申し訳ないのですが、どなたかもっといい方法や、解決法を教えてくださ