質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.46%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

2回答

1152閲覧

Javascriptで ゼロからフォームを作って内容をコンソールログに出力するプログラムを作りたいですがエラーが起きます。どうすればいいですか?

galaxy1

総合スコア5

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

1グッド

1クリップ

投稿2020/05/13 08:18

編集2020/05/15 01:41

vs code上でこのコードをうち、chromeで検証してみるとエラーが5箇所起きてしまいます。
どう解決すればいいでしょうか?

イメージ説明

HTML

1<!DOCTYPE html>! 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 6 <title>Document</title> 7 <link rel="stylesheet" href="css/style.css"> 8 <style> 9 10 </style> 11 12</head>! 13<body> 14 15 16   17 <script> 18 <form name="myForm"> 19 名前:<input type="text" name="name" /> 20 21 <br> 22 23 メールアドレス:<input type="email" name="email" /> </br> 24 25 <br> 26 27 <input type="radio" name="age" value="20" />20代 28 <input type="radio" name="age" value="30" />30代 29 <input type="radio" name="age" value="40" />40代 30 <input type="radio" name="age" value="50" />50代 31 32 <br> 33 34 <p>普段使っているスマホは?</p> 35 <input type="checkbox" name="phone" value="iphone" />iPhone 36 <input type="checkbox" name="phone" value="android" />Android 37 <input type="checkbox" name="phone" value="flip-phone" />ガラケー 38 <input type="checkbox" name="phone" value="other" />その他 39</form> 40 41<button id="btn">実行</button> 42const btn = document.getElementById('btn'); 43 44btn.addEventListener('click', () => { 45 const form = document.forms.myForm; 46 47 console.log(form.name.value); //名前の取得 48 console.log(form.email.value); //メールアドレスの取得 49 console.log(form.age.value); //年齢の取得 50 51 //スマホ種類の取得 52 form.phone.forEach(item => {if(item.checked) console.log(item.value); 53 }) 54}); 55 56 </script> 57</body> 58</html> 59コード
DrqYuto👍を押しています

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2020/05/13 08:37

コードはマークダウンのcode機能を利用してご提示ください。 コードの間に画像が挟まれていたり見るに耐えません。
kei344

2020/05/13 09:30

「エラーが起きます」では無く、エラー文を具体的にコードブロックで質問文に追記ください。
kei344

2020/05/13 09:31

あと、「Java」がどのように関係あるかも質問文に追記してください。
m.ts10806

2020/05/13 14:07

どこにも「Java」の要素がありません。コードにも質問内容にもありません。 そして丸投げのタイトルのみで質問内容が何もありません。エラーって何ですか? 実際のコードに下記は入っているのですか? ![](6dce026d776092a820059faa7cd4b397.png) ![イメージ説明](d83e66c3846263f4b1c63b2dcf471ff1.png) 自身が書いたコードを説明できますか?
galaxy1

2020/05/14 09:25

書き直しました。
m.ts10806

2020/05/14 09:42

「書き直す」ではなく「手元のコードをコピペして」です。 その上でマークダウン的な記述が入ってるのですか?そりゃまともに動くはずがない <!DOCTYPE html>![](6dce026d776092a820059faa7cd4b397.png)
m.ts10806

2020/05/14 09:44

ちゃんと書けば投稿から30分もかからず解決できる問題です。 というか、質問する前にきちんと見直せば自分で解決できる問題です。自身で説明できないコードを書いている証拠です。
guest

回答2

0

HTML

1 2<script> 3

の位置が違います。

投稿2020/05/13 08:30

kyoya0819

総合スコア10429

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

galaxy1

2020/05/14 04:02 編集

どう違いますか
AkitoshiManabe

2020/05/14 08:49

HTMLをインデントして確認してみましょう。 script 要素の中に JavaScriptのソース以外のコードが含まれています。
m.ts10806

2020/05/14 09:50 編集

hello worldも済んでなかったか。 html,css,JavaScriptの基礎の基礎からやりましょう。他からコピペで持ってきて何も吟味されてないコードは動きません。
guest

0

どう解決すればいいでしょうか?

既に出ている回答の意味は、「HTML は正しくマークアップしてください」です。
まずは、リファレンスなどを確認して 正しい文書構造のHTMLに仕上げてください。
正しくマークアップできていないHTMLでは JavaScript を動かそうとしてもエラーの原因でしかありません。


過去のご質問を見せていただきましたが、「分からない→ teratail で(答えを)聞く→できた(分かったつもりになっているが実は分かってない)」を繰り返す悪循環になっていませんか?

  • とほほのWWW入門 Webページ作成入門 を入門用のドリルに
  • 「MDN + タグ名」で検索して見つかるページを参考に

HTMLの基礎を身に着けてください。
JavaScript に取り掛かるのであれば、HTMLは間違ってはいけません。

投稿2020/05/14 22:21

編集2020/05/14 22:22
AkitoshiManabe

総合スコア5434

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.46%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問