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

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

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

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

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

Q&A

解決済

3回答

588閲覧

javascriptにてクリックしても反映されないです

leysxxk

総合スコア14

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

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

0グッド

0クリップ

投稿2020/03/20 03:09

result0のところに◯か×を表示させたいのですが、if文を使っても反映されません。
間違っている部分があればご指摘お願いします。

html

1<!DOCTYPE html> 2<html lang="ja" dir="ltr"> 3<head> 4 <meta charset="utf-8"> 5 <link rel="stylesheet" href="kate2.css"> 6 <form action="kate3.html" method="POST"> 7 <title>Eラーニング</title> 8</head> 9<body> 10 <div class="xia"></div> 11 <label class="answer"> 12 <label>1番<input type="radio" id="answer1"name="answer1" value="1" ></label> 13 <label>2番<input type="radio" name="answer1" value="2"></label> 14 <label>3番<input type="radio" name="answer1" value="3"></label> 15</label> 16 <p class="result" id="result0"></p> 17 <div class="xia2"></div> 18 <label class="answer"> 19 <label>1番<input type="radio" name="answer2" value="1"></label> 20 <label>2番<input type="radio" name="answer2" value="2"></label> 21 <label>3番<input type="radio" name="answer2" value="3"></label> 22 <label>4番<input type="radio" id="answer2"name="answer2" value="4"></label> 23</label> 24 <p class="result" id="result1"></p> 25 <div class="xia3"></div> 26 <label class="answer"> 27 <label>1番<input type="checkbox" name="answer3" value="1"></label> 28 <label>2番<input type="checkbox" id="answer3"name="answer3" value="2"></label> 29 <label>3番<input type="checkbox" id="answer3_1"name="answer3" value="3"></label> 30 <label>4番<input type="checkbox" name="answer3" value="4"></label> 31</label> 32 <p class="result" id="result2"></p> 33 <h3>採点</h3> 34 <p><span id="total"></span></p> 35 <input type="button" id="saiten" value="採点" onclick="click"></button> 36 <input type="submit" value="次へ"/> 37<input type="reset" onclick="history.back()" value="キャンセル"/> 38</form> 39<script type="text/javascript" src="kate2.js"></script> 40</body> 41</html> 42

javascript

1var answer1=document.getElementById("answer1"); 2var answer2=document.getElementById("answer2"); 3var answer2=document.getElementById("answer3"); 4var answer2=document.getElementById("answer3_1"); 5var result0=document.getElementById("result0"); 6var result1=document.getElementById("result1"); 7var result2=document.getElementById("result2"); 8var total=document.getElementById("total"); 9var saiten=document.getElementById("saiten"); 10 11var aaa = function () { 12if(answer1.checked) { 13result0.innerHTML="◯"; 14}else { 15 result0.innerHTML="◯"; 16}} 17

css

1footer { 2 margin-top: 40px; 3} 4.flex { 5 display: flex; 6 align-items: center; 7} 8.result { 9 margin-left: 1em; 10 padding: 5px; 11 min-width: 100px; 12 min-height: 1em; 13 background: #eee; 14} 15.xia,.xia2,.xia3{ 16 border: 1px solid #000000; 17 width: 830px; 18 height: 70px; 19} 20p{ 21 width: 29px; 22} 23

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

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

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

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

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

guest

回答3

0

ベストアンサー

クリックしても反映されないです

クリックイベントから関数を呼び出してください。

クリック時の処理!JavaScriptでonclickを使う方法 | TechAcademyマガジン

投稿2020/03/20 03:43

hatena19

総合スコア34075

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

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

0

関数式

定義したら、何らかの形で呼び出さないとね。

<input type="button" id="saiten" value="採点" onclick="click"></button>

どこでこの書き方見つけたのでしょう。
全角スペース混じってるので正しく動かないのは明白ですけど。。

プログラミングは「構文」により成り立っています。
思ったように動くのではなく、書いた通りに動きます。
なので、仕様をきちんとおさえる必要があります。

GlobalEventHandlers.onclick

構文
target.onclick = functionRef;
functionRef は、関数名または関数式です。 この関数は、MouseEvent オブジェクトを唯一の引数として受け取ります。 関数内では、this はイベントがトリガーされた要素になります。

ということでonclick="click"と書いたら、「clickと定義された関数を呼び出す」ということになります。

これも「設計」で、定義される情報、それを使用するコード 必ず整合性がとられてないといけません。

ちなみに以前の質問の回答が全く参考にされていないように思います。
1つ前の質問の回答には本当に様々な手法が記載されていますが、理解されたのでしょうか?
理解できなかった部分があるのでしたらその場でコメントで確認して理解を深め、知見を得るのが質問者に求められる行動だと思います。

折角時間を使っていただいたアドバイスですから、活かさないとお互い無駄な時間を浪費するだけになりますからね。

もし過去質問をきちんと理解できているなら、今回のような質問は出てこなかったのではないでしょうか。

投稿2020/03/20 03:21

編集2020/03/20 04:25
m.ts10806

総合スコア80875

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

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

0

関数aaaがどこにも使われていないです。

投稿2020/03/20 03:15

kei344

総合スコア69606

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.35%

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

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

質問する

関連した質問