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

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

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

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

1回答

570閲覧

JavaScriptのif文、イベントリスナーなどについて

退会済みユーザー

退会済みユーザー

総合スコア0

JavaScript

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

1クリップ

投稿2018/08/17 08:37

編集2022/01/12 10:55

前提・実現したいこと

プログラムを独学で勉強し始めて一カ月弱の初心者です。
現在HTML、JavaScriptで以下のような練習問題に取り掛かっています。
お店の人「お会計は○○○○円です」←クリックしたら
A君「僕は○○○○円持ってるよ」←この部分が表示される
B君「僕は○○○○円持ってるよ」←この部分が表示される
C君「僕は○○○○円持ってるよ」←この部分が表示される
『○君「じゃあ僕がおごるよ!」』あるいは、『○君○君「僕たちがおごるよ」』あるいは、『全員「割り勘だね」』あるいは、『全員「お金足りないね…」』←この部分が変化し表示される
お会計の合計金額とA君とB君とC君のそれそれの所持金を書き換えられるようにして、それぞれの所持金を比較して返答の表示が書き換わるプログラムを書く練習問題をやっているのですが、私の理解も追い付いていなく、上手く動かないため教えていただきたいです。

発生している問題・エラーメッセージ

JavaScript

1window.onload = function (){ 2 var test = document.getElementById("tes"); 3 test.addEventListener('click',push1, false); 4} 5function push1(){ 6var test1 = document.getElementById("test1"); 7var test2 = document.getElementById("test2"); 8var test3 = document.getElementById("test3"); 9var test4 = document.getElementById("test4"); 10var test5 = document.getElementById("test5"); 11var test6 = document.getElementById("test6"); 12var test7 = document.getElementById("test7"); 13var test8 = document.getElementById("test8"); 14var elem = document.getElementById("element"); 15 if(test2 + test4 < test7){ 16 elem.innerHTML = "二人「お金足りないね...」"; 17 console.log("二人「お金足りないね...」"); 18 }else if(test2 > test4){ 19 elem.innerHTML = "A君「じゃあ僕がおごるよ!」"; 20 console.log("A君「じゃあ僕がおごるよ!」"); 21 }else if(test2 < test4){ 22 elem.innerHTML = "B君「じゃあ僕がおごるよ!」"; 23 console.log("B君「じゃあ僕がおごるよ!」"); 24 25 }else{ 26 elem.innerHTML = "2人「割り勘にしよう!」"; 27 console.log("2人「割り勘にしよう!」"); 28 } 29}

HTML

1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4<meta charset="utf-8"> 5<title>JavaScriptの学習</title> 6</head> 7<body> 8<p> 9 <span id="test6">お店の人「お会計は</span> 10 <span id="test7">2000</span> 11 <span id="test8">円です」</span> 12 <input id="tes" type="button" value="お支払い" /> 13</p> 14<br> 15<p> 16 <span id="test1">A君「僕は</span> 17 <span id="test2">1000 18 <span id="test5">円持ってるよ」</span> 19<br> 20 <span id="test3">B君「僕は</span> 21 <span id="test4">5000 22 <span id="test5">円持ってるよ」</span> 23</p> 24<span id="element"></span> 25<script type="text/javascript" src="./js/if-kadai2.js"></script> 26</body> 27</html>

若干修正いたしました。
現時点でクリックしたときは答えが表示されるのですが、if文の条件定義が間違っていて、B君の方がたくさんお金を持っていても、割り勘にしようと出てしまいます。elseの割り勘にしようはなくてもいいのですが、どのようにifを直したら、しっかり条件定義出来て、クリックしたときに数字によって答えが変わるのでしょうか。
ここに質問するのが初めてで、不慣れで申し訳ないのですがよろしくお願いいたします。

該当のソースコード

HTML

<html lang="ja"> <head> <meta charset="utf-8"> <title>JavaScriptの学習</title> </head> <body> <p> <span id="test6">お店の人「お会計は</span> <span id="test7">2000</span> <span id="test8">円です」</span> <input id="tes" type="button" value="お支払い" /> </p> <br> <p> <span id="test1">A君「僕は</span> <input id="test2"></input> <span id="test5">円持ってるよ」</span> <br> <span id="test3">B君「僕は</span> <input id="test4"></input> <span id="test5">円持ってるよ」</span> </p> <input id="element" type="text" /> <script type="text/javascript" src="./js/if-kadai2.js"></script> </body> </html>

JavaScript

window.onload = function (){ var test = document.getElementById("tes"); test.addEventListener('click',push1, false); } function push1(){ var test1 = document.getElementById("test1"); var test2 = document.getElementById("test2"); var test3 = document.getElementById("test3"); var test4 = document.getElementById("test4"); var test5 = document.getElementById("test5"); var test6 = document.getElementById("test6"); var test7 = document.getElementById("test7"); var test8 = document.getElementById("test8"); var elem = document.getElementById("element"); if(test2 + test4 < test7){ document.getElementById("element"); elem.innerHTML = "二人「お金足りないね...」"; console.log("二人「お金足りないね...」"); }else if(test2 > test4){ document.getElementById("element"); elem.innerHTML = "A君「じゃあ僕がおごるよ!」"; console.log("A君「じゃあ僕がおごるよ!」"); }else if(test2 < test4){ document.getElementById("element"); elem.innerHTML = "B君「じゃあ僕がおごるよ!」"; console.log("B君「じゃあ僕がおごるよ!」"); }else{ document.getElementById("element"); elem.innerHTML = "2人「割り勘にしよう!」"; console.log("2人「割り勘にしよう!」"); } }

試したこと

色々試した結果何が正しくて、何が間違っているのかが分からなくなっている状況です。
クリックしても反応が無いのと、上手く条件定義が出来ていなくてif文の()の中がおかしいと思っています。後別にspanを使わなくてもいいですが、なんとなく使っています。

補足情報(FW/ツールのバージョンなど)

ここにより詳細な情報を記載してください。

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

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

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

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

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

m.ts10806

2018/08/17 21:31

「発生している問題・エラーメッセージ」には実際に起きている問題やエラーメッセージを具体的に書いてください。まずは動かしたときにブラウザの開発ツールコンソールを確認してエラーが出ていないかどうか。 そのあたり確認して、質問本文に追記してください。(プログラムは指示したとおりにしか動かないので「なんとなく」だらけでは動かなくて当然と思ってください。プログラムは空気を読んでくれません。)
m.ts10806

2018/08/17 21:33

ちなみにデバッグ依頼は丸投げ質問として非推奨です。 https://teratail.com/help/avoid-asking 具体的に起きている問題と自身がやってみたこと試したこと調べたことを記載し、何がどう解決に至らないか・分からないかを質問するのが基本です。
kei344

2018/08/20 09:40

まだ質問が「受付中」になっていますが、どのように解決したのかを回答文に書き、「解決済」にされてはいかがでしょうか。
guest

回答1

0

まず、HTML部分。
idが重複し、</input> が不要です。

【id - HTML: HyperText Markup Language | MDN】
https://developer.mozilla.org/ja/docs/Web/HTML/Global_attributes/id

id グローバル属性 は、文書全体で一意でなければならない識別子 (ID) を定義します。

<input>: 入力欄 (フォーム入力) 要素 - HTML: HyperText Markup Language | MDN】
https://developer.mozilla.org/ja/docs/Web/HTML/Element/Input

終了タグを記述してはなりません。


JavaScript部分。

var test1 = document.getElementById("test1");var test1 = document.getElementById("test1").value; では?

var elem = document.getElementById("element"); で取得したエレメントがinput要素なので、elem.innerHTMLでの書き換えは出来ません。

if のたびに document.getElementById("element"); が書かれていますが、意味のない記述です。(取得した物を利用するコードになっていない)

【JavaScriptで入力フォームの値を取得する方法】
https://lab.syncer.jp/Web/JavaScript/Snippet/28/

【JavaScriptで入力フォームに値をセットする方法】
https://lab.syncer.jp/Web/JavaScript/Snippet/29/

投稿2018/08/17 09:46

kei344

総合スコア69364

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

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

kei344

2018/08/18 07:04

どこからどこまでが追記部分かがわかりにくいですが、spanは閉じタグ必須です。また、比較に使っているのがDOMオブジェクトなので意図通りにはならないでしょう。input要素ならvalueで取得できるのに。 【<span> - HTML: HyperText Markup Language | MDN】 https://developer.mozilla.org/ja/docs/Web/HTML/Element/span
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

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

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

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問