JavaScriptでボタンを設置させる方法【初心者向け】

プログラミング初心者向けに、JavaScriptで「ボタンを設置する方法」を解説した記事です。コードを変えるだけで簡単にボタンを設置することができるので、ぜひ試してみてください。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が1,000以上あります。

初心者でも簡単に使えるJavaScriptのコードを紹介する記事です。

なお本記事は、オンラインブートキャンプ フロントエンドコース(JavaScript・jQuery講座)の内容をもとにしています。

 

クリックできるボタンは、一般的なサイトでもよく見ると思いますので、覚えておきましょう。

 

ボタンを表示させる方法

まずはテキストで通常通りに書いていきます。

<img src=”images/ducks.jpg” alt=”あひる”>
<p>あひる5個セット</p>
<p>800円</p>
<p>購入する</p>

元データ

 

こここから「購入する」ボタンを作成していきます。

 

ボタンにするには、

<input type=”submit” value=”購入する”>

と入れるだけです。

ここで「購入する」の文字を変えれば、その文字を使ったボタンになります。

 

適用するとこうなります。

<img src=”images/ducks.jpg” alt=”あひる”>
<p>あひる5個セット</p>
<p>800円</p>
<input type=”submit” value=”購入する” >

ボタン設置

簡単にできましたね。

設置したボタンをクリックすると、ポップアップウィンドウが表示される表現を加えることもできるのであわせて試しても良いでしょう。

 

誰でも簡単にできるので、ぜひ自分でもやってみてください!

また、入門向けのJavaScriptを学習できるサイトも紹介しているので、合わせてご覧ください。

[お知らせ]TechAcademyではJavaScriptを使ってWebサービスを公開できるオンラインブートキャンプ フロントエンドコース(JavaScript・jQuery講座)を開催しています。プログラミングの初心者でも受講可能です。