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

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

ただいまの
回答率

88.03%

ホームページ上での計算

受付中

回答 0

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 674

score 2

ホームページ上のフォームに数字を入れると、

計算結果と表示されるようにし、1つの図に折れ線グラフで
それぞれが比較して見られるものをJavaScriptで作りたいと
考えています。

イメージとしては、想定の利率の%はこちらで設定しておいて、
元金、期間を入れると、自動でX年後のリターンが出るようにしたい
と思っています。

元金 Xドル(自由に入力出来る)
期間 X年(自由に入力出来る)

【種目】 銀行 商品X(名前変えられる) 仮想通貨 FX 不動産
保証 ○ ○ × × ×
利率 0.01% 250% 15%~876% 50% 105%
X年後 計算結果 計算結果 計算結果 計算結果 計算結果

↓折れ線グラフ挿入

以上です。

自分でも調べたのですが、なかなか思ったようにならなかったので、
今回質問をさせていただきました。

プログラミングに疎いもので、大変ワガママなお話で恐縮ですが、
ご教示いただけますと幸いです。

コード


<!doctype html>
<html>
<head>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-138256867-1&quot;&gt;&lt;/script&gt;
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());

gtag('config', 'UA-138256867-1');
</script>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/style.css">
</style>
<script>
function sample() {
window.scrollTo(0,50);
}
</script>
</head>
<BODY >
<DIV class="container">
<DIV id="header">
<DIV id="header_bk">
<DIV id="header_top">
</DIV>
</DIV>
<section id="catMenu">
<ul class="flex">
<li class="btn"><a href="index.html">Infomation</a></li>
<li class="btn"><a href="simulation.html">Simulation</a></li>
<li class="btn"><a href="question.html">Question</a></li>
<li class="btn"></li>
</ul>
</section>
<section id="catBtnsSection">
<div class="flex between cate">
<div><a href="index.html"><img src="images/infomation.png" alt=""></a></div>
<div><a href="simulation.html"><img src="images/simulation.png" alt=""></a></div>
<div><a href="question.html"><img src="images/question.png" alt=""></a></div>
</div>
</section>
</DIV>
<div class="wrap">
<DIV class="contents">
<section class="conTabel">
<form>
<h2>Simulation</h2>
<p class="descr">※元金と期間を入力すると下の表に未来の予測金額をシミュレートします。</p>
<p><label for="textForm">元金 : </label>
<input type="text" id="textForm"><label for="textForm"> ドル </label></p>
<p><label for="textForm2">期間 : </label>
<input type="text" id="textForm2"><label for="textForm2"> 年後</label></p>

<div class="buttonWrap"><button id="button">シミュレートする</button></div>
</form>
<div class="tableWrap">
<table>
<tr>
<th>種目</th>
<th>銀行</th>
<th class="tablePoint">商品A</th>
<th>仮想通貨</th>
<th>FX</th>
<th>不動産</th>
</tr>
<tr>
<td align="right" nowrap>保証</td>
<td valign="top">○</td>
<td class="tablePoint" valign="top" >○</td>
<td valign="top" >×</td>
<td valign="top" >×</td>
<td valign="top" >△</td>
</tr>
<tr>
<td bgcolor="#99CC00" align="right" nowrap>利率</td>
<td valign="top">0.01%</td>
<td class="tablePoint" valign="top" >250%</td>
<td valign="top" >15% - 876%</td>
<td valign="top" >50%</td>
<td valign="top" >105%</td>
</tr>
<tr>
<td id="resultForm0" bgcolor="#99CC00" align="right" nowrap>年月</td>
<td id="resultForm1" valign="top">ドル</td>
<td class="tablePoint" id="resultForm2" valign="top" >ドル</td>
<td id="resultForm3" valign="top" >ドル</td>
<td id="resultForm4" valign="top" >ドル</td>
<td id="resultForm5" valign="top" >ドル</td>
</tr>
<tr>
<td bgcolor="#99CC00" align="right" nowrap>サービス</td>
<td valign="top">-</td>
<td valign="top" >-</td>
<td valign="top" >-</td>
<td valign="top" >-</td>
</tr>
<tr>
<td bgcolor="#99CC00" align="right" nowrap>詳細・特徴・将来性</td>
<td valign="top"><a href="https://www.jp-bank.japanpost.jp/kojin/chokin/tujo/kj_cho_tj_index.html&quot; rel="noreferrer">郵貯HPへ</a></td>
<td valign="top" >-</td>
<td valign="top" >-</td>
<td valign="top" >-</td>
</tr>
</table>
</div>
</section>
</DIV>
</div>
<FOOTER id="footer_notfix_gray_login">
<div class="footerWrap"></div>
<DIV class="upper" onclick="sample()">^ </DIV>
<div class="fotterFont">
<ADDRESS class="footer_copy">
※掲載されている情報は、投資判断の参考として投資一般に関する情報提供を目的とするものであり、投資の最終決定はご自身の判断でなさるようにお願いいたします。
</ADDRESS>
<ADDRESS class="footer_copy">
</ADDRESS>
<div class="pcflex">
<!--<TABLE class="ftabele">
<TBODY>
<TR>
<TD><IMG class="footerlink_icon" src="images/arrow_small.png"></TD>
<TD><A class="footerlink_link" href="poricy.html">poricy</A></TD>
</TR>
</TBODY>
</TABLE>
<TABLE class="ftabele">
<TBODY>
<TR>
<TD><IMG class="footerlink_icon" src="images/arrow_small.png"></TD>
<TD><A class="footerlink_link" href="toc.html">Terms of Service</A></TD>
</TR>
</TBODY>
</TABLE>-->
</div>
</div>
</div>
</FOOTER>
</BODY>

<script>

// ボタンの要素を取得
var button = document.getElementById("button");

// ボタンをクリックした時の処理
button.addEventListener("click", function(e) {

e.preventDefault();

// 入力フォームの値を取得
var textForm = document.getElementById("textForm").value;
var textForm2 = document.getElementById("textForm2").value;

//全角数字を半角数字に変換(textForm)
var before = new Array("1","2","3","4","5","6","7","8","9","0");
var after=new Array("1","2","3","4","5","6","7","8","9","0");
var val = textForm;

var bef = before;
var aft = after;

for (i = 0; i < aft.length; i++) {
reg = new RegExp(bef[i], "g");
val = val.replace(reg, aft[i]);
}
textForm=Number(val);

//全角数字を半角数字に変換(textForm2)
var before = new Array("1","2","3","4","5","6","7","8","9","0");
var after=new Array("1","2","3","4","5","6","7","8","9","0");
var val = textForm2;

var bef = before;
var aft = after;

for (i = 0; i < aft.length; i++) {
reg = new RegExp(bef[i], "g");
val = val.replace(reg, aft[i]);
}
textForm2=Number(val);

// 取得した値を別の表に表示
document.getElementById("resultForm0").innerText = textForm2+"年後";

// 取得した値を別の表に表示
var result = textForm*(1.0001**textForm2);
// 数字を丸く
result = result*100;
result = Math.round(result);
result = result/100;
// 3桁ごとにカンマ
var num = new String( result );
while( num != ( num = num.replace( /(\d)((\d\d\d)+\b)/, '$1,$2' ) ) );
result = num;
document.getElementById("resultForm1").innerText = result+"ドル";

// 取得した値を別の表に表示
result = textForm*(2.5**textForm2);
result = result*100;
result = Math.round(result);
result = result/100;
num = new String( result );
while( num != ( num = num.replace( /(\d)((\d\d\d)+\b)/, '$1,$2' ) ) );
result = num;
document.getElementById("resultForm2").innerText = result+"ドル";

// 取得した値を別の表に表示
result = textForm*(0.015textForm2); result = result*100; result = Math.round(result); result = result/100; num = new String( result ); while( num != ( num = num.replace( /(\d)((\d\d\d)+\b)/, '$1,$2' ) ) ); result = num; var result2 = textForm*(8.76textForm2);
result2 = result2*100;
result2 = Math.round(result2);
result2 = result2/100;
num = new String( result2 );
while( num != ( num = num.replace( /(\d)((\d\d\d)+\b)/, '$1,$2' ) ) );
result2 = num;
document.getElementById("resultForm3").innerText = result+"ドル - "+result2+"ドル";

// 取得した値を別の表に表示
result = textForm*(0.5**textForm2);
result = result*100;
result = Math.round(result);
result = result/100;
num = new String( result );
while( num != ( num = num.replace( /(\d)((\d\d\d)+\b)/, '$1,$2' ) ) );
result = num;
document.getElementById("resultForm4").innerText = result+"ドル";

// 取得した値を別の表に表示
result = textForm*(1.05**textForm2);
result = result*100;
result = Math.round(result);
result = result/100;
num = new String( result );
while( num != ( num = num.replace( /(\d)((\d\d\d)+\b)/, '$1,$2' ) ) );
result = num;
document.getElementById("resultForm5").innerText = result+"ドル";

});

</script>
</html>

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正の依頼

  • 退会済みユーザー

    2019/08/16 16:27

    複数のユーザーから「やってほしいことだけを記載した丸投げの質問」という意見がありました
    「質問を編集する」ボタンから編集を行い、調査したこと・試したことを記入していただくと、回答が得られやすくなります。

  • kei344

    2019/08/16 17:09

    「何」が「どのように」わからないのか、コードのどの部分で詰まっているのかなどを、出ているエラーなどと併せて、具体的に記述されたほうが回答を得られやすいと思います。

    キャンセル

  • workmen

    2019/08/19 17:52

    コメントありがとうございます。

    web上に入力した数字をどうすればグラフに反映出来るのか伺いたかったのですが、まずは私自身でグラフ作成まで行い、改めて具体的に質問させていただければと思います。

    ご丁寧にありがとうございました。

    キャンセル

まだ回答がついていません

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

  • ただいまの回答率 88.03%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る