button以外のonclick (画像の高さや幅を変更)

エラー発見を容易にする設定→

タグの中に onclick="関数名()"の記述で、クリックにより実行させたい関数を指定できますが、これは ボタン以外でも可能です。
ボタン以外でもクリックで実行させたいタグ内のonclick属性に、行わせたい命令の記述を登録することで可能です。
以下でimgタグとspanタグに使う例を示します。クリックで２つの画像を交換し、高さを変える処理になっています。

下の２つのボタンが描かれる絵と【クリック】の３ヵ所をそれぞれ押して確認ください。
左の画像を【クリック】で低くできます。

上記のようなhtmlは、次のような内容になります。

<html>
<head>
	<title>test</title>
<script type="text/javascript">
<!--
function imgLeft_Click(){
  document.imgLeft.src="img/swPush.png";
  document.imgLeft.width=50;
  document.imgRight.src="img/swPop.png";
  document.imgRight.width=80;
}

function imgRight_Click(){
  document.imgRight.src="img/swPush.png";
  document.imgRight.width=50;
  document.imgLeft.src="img/swPop.png";
  document.imgLeft.width=80;
}

function span1_Click(){
  document.imgLeft.height=30;
  document.imgRight.height=30;
}
// -->
</script>
</head>
<body>
<p>
下の２つのボタンが描かれる絵と【クリック】の３ヵ所をそれぞれ押して確認ください。<br>
<img src="img/swPop.png" width="120" name="imgLeft"  onclick="imgLeft_Click()" >
<img src="img/swPush.png" width="120" name="imgRight" onclick="imgRight_Click()">
左の画像を
<span style="background-color: #66FF66;" onclick="span1_Click()">
【クリック】
</span>で低くできます。<br>
</p>
</body>
</html>

まず、imgタグ内の、imgLeft とimgRight に注目ください。ここでそれぞれの画像タグに、 imgLeftとimgRightの名前をつけています。
これにより、document.名前の指定で imgタグの部分をプログラムで制御できます。
例えばimgLeftの名前がついた画像の幅を80へ変更する場合、
document.imgLeft.width=80;という表現で行います。
同様に、imgRightの名前がついた画像の高さを30へ変更する場合、
document.imgRight.height=30;という表現で行います。

ここでの=は、代入演算子と呼ばれる指示で、右にある30の数値情報を、左に書いたdocument.imgRight.heightへ記憶させる命令の表現です。この実行によりimgRightの名前が付いている画像の高さが変化します。
なお、上記実験で分かるように変更するのが、widthまたはheightの一方だけであれば、他方も相対的に変化します。つまり、縦横の比率を保ったままの拡大や縮小ができます。しかし、 widthとheightのそれぞれを変更した時点以降では、それぞれで指定したサイズに変わります。
なお、上記の変更を次のようにダブルクォートを付けた表現でも可能です。
document.imgLeft.width="80";
document.imgRight.height="30";
" で囲んだ範囲は文字列と呼ばれ、囲まない数字の並びは数値と呼ばれ、全く異質のもです。ですがJavaScriptでは、=の処理内部に、変更対象によって合わせる機能があるので可能になっています。
詳しくは後述しますが数値として表現する場合、当サイトでは " で囲まない表現をしています。

上記プログラムでは、背景が黄色の範囲でプログラムを書いています。その範囲は <script >と </script>で、囲むことにより指定しています。
その中に関数（かんすう）と呼ばれる３つの命令を作っています。

一つは青文字の範囲でimgLeft_Clickの名前の関数を作っており、 "img/swPop.png"の画像をクリックしたときに実行させるため、その<img と>の中にonclick="imgLeft_Click()"を書いています。

同様に緑文字の範囲でimgRight_Clickの名前の関数を作っており、 "img/swPush.png"の画像をクリックしたときに実行させるため、その<img と>の中にonclick="imgRight_Click()"を書いています。

またピンク文字の範囲でspan1_Click"の名前の関数を作っており、【クリック】のspan範囲をクリックしたときに実行させるため、その開始タグの <span と>の中にonclick="span1_Click()"を書いています。

このページは、ボタンクリックなどの確認すべき操作をすべて行わないと指示のページへのボタンが有効になりません。