前提・実現したいこと

html javascript で￥から＄に計算をしたいです。
＄から￥にも計算したいです。
入力欄に、お金を入力してもらい、そこから計算ボタンを押すと結果が出る感じにしたいです。
html javascriptは全くの初心者で、初歩的な質問なのですが、どなたかお願いいたします。

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

問題としては、入力欄やボタンなどは用意できたのですが、ボタンを押しても結果が表示されません。
scriptのif文が間違っているのか、メソッドの呼び出しができていないのか、、、
そもそも作り方が違うのか、、
わからない状態です、、

該当のソースコード

Javascript
1<!DOCTYPE html>
2<html lang="ja">
3
4<head>
5  <meta charset="utf-8">
6  <title>rate</title>
7</head>
8
9<body>
10  <form name="yentodoll" action="#" method="post">
11    <p>金額を入力してください：￥→＄<br>
12      <input type="text" yens="yens">
13    </p>
14
15
16    <form name="dolltoyen" action="#" method="post">
17      <p>金額を入力してください：＄→￥<br>
18        <input type="text" dollars="dollars">
19      </p>
20
21      <input type="button" value="計算" onclick="rate1()">
22
23      <div id="output"></div>
24
25
26
27
28      <script language="javascript" type="text/javascript">
29       var rate1 =  function () {
30
31          var dollar;
32          var yen;
33          var rate = 108;
34
35          yen = dollars * rate;
36          dollar = yens / rate;
37
38          console.log(document.yentodoll_form);
39          if (document.yentodoll_form.yens >= 0) {
40            document.getElementById("output").innerHTML = ('＄', dollar);
41
42          }
43          console.log(document.dolltoyen_form);
44          if (document.dolltoyen_form.dollars > 0) {
45            document.getElementById("output").innerHTML = ('￥', yen);
46          }
47        }
48
49
50      </script>
51</body>
52
53</html>

試したこと

if文の中を変えたり、function宣言の書き方を変えたりしたのですがうまくいきません。

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

yambejp

2021/05/12 02:53

レートは固定でよいのでしょうか？（とはいえリアルタイムでどこかから持ってくるのはかなり無茶ですけど）

退会済みユーザー

2021/05/12 02:55

とりあえず固定で大丈夫です！

int32_t

2021/05/12 04:34

質問をより具体的にしたほうが具体的なアドバイスが得られると思います。「ブラウザの開発者ツールのコンソールに〜というエラーが出ているがどう対処したらいいか」「console.log(document.yentodoll_form) の結果が undefined なのはなぜか」など。

退会済みユーザー

2021/05/12 05:54

ご指摘ありがとうございます。私レベルですと質問内容を明確にするのも難しくて、、、頑張ります！

m.ts10806

2021/05/12 07:03

質問は編集できますので

K_3578

2021/05/12 08:42

解決済のものにツッコむのもあれだがJava scriptだと意味合いが違ってくる　>タイトル

K_3578

2021/05/12 08:52 編集

削除.

退会済みユーザー

2021/05/12 08:52

お恥ずかしいです、、ご指摘ありがとうございます。修正しました。

行動規範の内容に同意します

回答4件

ベストアンサー

全体的な書き直しが必要です
inputの属性にyensやdollarsという特殊な属性をつけるのはよくありません
formもきちんと閉じていませんし、ボタンが一つしか無いとドル/円なのか円/ドルなのかわかりません
input要素もつかめてませんし(おそらく)HTML要素を0と比較するのもおかしいです

調整

javascript
1<script>
2const showMessage = x =>{
3  const rate=108;
4  const type=x.dataset.type;
5  let val=parseFloat(x.form.querySelector('[type=text]').value)||0;
6  val*=(type=="dollar"?rate:(1/rate));
7  document.querySelector('#output-message').textContent=val;
8}
9</script>
10<p>￥から＄に</p>
11<p>￥を入力してください</p>
12<form>
13<input type="text">
14<input type="button" onclick="showMessage(this)" value="exchange" data-type="yen">
15</form>
16<p>＄から￥に</p>
17<p>＄を入力してください</p>
18<form id="form2" action="#">
19<input type="text" id="">
20<input type="button" onclick="showMessage(this)" value="exchange" data-type="dollar">
21</form>
22<p id="output-message"></p>

投稿2021/05/12 04:17

編集2021/05/12 06:04

yambejp

総合スコア116732

退会済みユーザー

2021/05/12 05:50

ご指摘ありがとうございます！全体的に書き直してみました。ボタンを二つにして、式を二つ作るような感じで作ってみました。勉強が足りていなかったです。頑張ります。

退会済みユーザー

2021/05/12 06:12

サンプルありがとうございます。今さらっと見ましたが、コードがすっきりしていて私の理想という感じです。書いてくださったコードでわからないところもあるので調べて勉強します！！ありがとうございました。サンプルまでくださったのでベストアンサーにさせていただきました！！

行動規範の内容に同意します

yensなど独自属性を用意された意図が不明ですが、入力値はvalue属性にて設定、参照するので、value属性を参照してください。
また、入力値は文字列として取得されるので数値参照したいのでしたら、parseIntはしておいたほうが確実です。

投稿2021/05/12 04:19

m.ts10806

総合スコア80875

退会済みユーザー

2021/05/12 05:49

属性などの勉強が足りませんでした、、、自分でもよくわからず書いていました。ご指摘ありがとうございます。

m.ts10806

2021/05/12 07:05

独自に属性を設けることは可能です（あくまで「プロパティ」という考え方）がブラウザによっては許可してないケースがあるかもしれないので扱いには注意です。汎用的に値を操作したいのでしたらdata属性が有用です。

退会済みユーザー

2021/05/12 08:35

属性についてもっと勉強してきます。ありがとうございます。

行動規範の内容に同意します

下記のコードをそのままコピペで構わないので動かしてみてください。(ckさんのコードを元に大幅に書き直してみました。)

わかりやすくするため敢えて冗長(まどろっこしい)書き方をしているので行を消したり変数の値を変えたりしてどう動いているのか勉強してみてください。

<!DOCTYPE html>
<html lang="ja">

	<head>
		<meta charset="utf-8">
		<title>rate</title>
	</head>

	<body>
		<form name="yentodoll" action="#" method="post">
			<p>金額を入力してください：￥→＄<br>
			<input type="text" id="yen">
			</p>
			<!--<input type="button" value="計算" onclick='currency_exchange("yen")'> -->
			<p>金額を入力してください：＄→￥<br>
			<input type="text" id="dollar">
			</p>
			<input type="button" value="計算" onclick="currency_exchange()">
		</form>

		<div id="output">
		</div>




		<script language="javascript" type="text/javascript">
			const exchage_rate = 100 // 円とドルの交換レートを100倍であるとします。これは定数です。
// 「両替」計算のための関数,rateという関数名だとなんの関数かわかりにくいかなぁ。。と思います！
function currency_exchange(){
	//console.log("この関数動くかな");
	//let yen_element = document.getElementById("yen");
	//console.log(yen_element); // 何が入っているのか確認してみましょう
	//console.log(yen_element.value); //何が入っているのか確認してみましょう
	let yen = document.getElementById("yen").value;
	let exchaged_dollar = yen * exchage_rate;
	console.log("￥→＄:" + exchaged_dollar); // 計算が上手く行ったか確認してみましょう

	let dollar = document.getElementById("dollar").value;
	console.log(dollar);
	let exchaged_yen = dollar / exchage_rate;
	console.log("＄→￥:" + exchaged_yen); // 計算が上手く行ったか確認してみましょう

	show_exchaged(exchaged_dollar, exchaged_yen);
}
// 交換した後のお金の表示のための関数
function show_exchaged(exchaged_dollar, exchaged_yen){
	let output = document.getElementById("output");
	exchaged_dollar_element = document.createElement("p"); // なんのタグを使ったエレメントなのか指定します
	exchaged_dollar_element.textContent = "￥→＄:" + exchaged_dollar + "ドル" //中身を入れます
	output.appendChild(exchaged_dollar_element); //outputの中に指定したhtmlエレメントの作成をお願いします

	exchaged_yen_element = document.createElement("p"); // なんのタグを使ったエレメントなのか指定します
	exchaged_yen_element.textContent = "＄→￥:" + exchaged_yen + "円" //中身を入れます
	output.appendChild(exchaged_yen_element); //outputの中に指定したhtmlエレメントの作成をお願いします

}
		</script>
	</body>

</html>

まず上記を見て、
(1)console.logとは
(2)JSのDOM操作とは
(3)htmlのinputタグの使い方

上記3つを念頭に勉強してみてください。上記を理解後余裕があれば他の回答の方が言われているparseIntなど調べてみてください。
またわからないことがあったら言ってください。

投稿2021/05/12 06:29

編集2021/05/12 06:31

digitalhimiko

総合スコア142

退会済みユーザー

2021/05/12 06:37

ご丁寧にたくさんありがとうございます！！ご指摘してくださった三つ勉強します。

digitalhimiko

2021/05/12 06:42

はい！私も1年前にプログラミング勉強したてのころはckさんと同じような状態だったので頑張ってください！あと追加アドバイスですが使用しているブラウザの開発者コンソールを開いてエラーをチェックするくせをつけてみてください。console.logの出力内容も開発者コンソールで確認できるので、はじめのうちは少しコードを書いたらconsole.logで変数や値が正しく(自分の意図したとおりに)出力できるかを確認して作業進めていくのがおすすめです。 - 開発者コンソールとは(もうご存知かもしれませんが念の為参考記事を載せておきます。) https://www.buildinsider.net/web/chromedevtools/01

退会済みユーザー

2021/05/12 08:32

たくさん教えていただいて本当にありがとうございます。今年の四月からプログラミングをはじめ右も左もわからないまま、いろんな言語で課題を出され毎日てんやわんやです。。。加えて教育係の方は質問しても答えが返ってこないという感じです。。。困り果てていたので本当に助かりました。ありがとうございます。 Java SQL HTML CSS Javascript excelVBAを一か月で同時進行しているので整理しながら頑張ります！！

行動規範の内容に同意します

とりあえずこんな感じで書き直しました。
自分でどんなシステムにしたいか現実的な考えができていませんでした。
皆さまありがとうございます。
ここからもまだまだ改善点ありそうですが、、、

Javascript
1<!DOCTYPE html>
2<html>
3
4<head>
5  <meta charset="utf-8" />
6  <title>sample1</title>
7</head>
8
9<body>
10  <p>￥から＄に</p>
11  <p>￥を入力してください</p>
12  <form id="form1" action="#">
13    <input type="text" id="input-message">
14    <input type="button" onclick="showMessage()" value="exchange">
15  </form>
16  <p id="output-message"></p>
17  <script language="javascript" type="text/javascript">
18    const showMessage = () => {
19      const textbox = document.getElementById("input-message");
20      const inputValue = textbox.value;
21
22      //テキストボックスの値を使って、出力するメッセージを生成する
23      const output = "＄1＝￥108で換算すると「＄" + inputValue / 108 + "」です。";
24      //出力用のp要素にメッセージを表示
25      document.getElementById("output-message").innerHTML = output;
26    }
27  </script>
28</body>
29
30<body>
31  <p>＄から￥に</p>
32  <p>＄を入力してください</p>
33  <form id="form2" action="#">
34    <input type="text" id="input-messages">
35    <input type="button" onclick="showMessages()" value="exchange">
36  </form>
37  <p id="output-messages"></p>
38  <script language="javascript" type="text/javascript">
39    const showMessages = () => {
40      const textbox = document.getElementById("input-messages");
41      const inputValues = textbox.value;
42
43      //テキストボックスの値を使って、出力するメッセージを生成する
44      const output = "＄1＝￥108で換算すると「￥" + inputValues * 108 + "」です。";
45      //出力用のp要素にメッセージを表示
46      document.getElementById("output-messages").innerHTML = output;
47    }
48  </script>
49</body>
50
51</html>