Q&A
その思うようにならなかったというコードを提示しましょう
###ホームページ上のフォームに数字を入れると、
計算結果と表示されるようにし、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"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date());JavaScript
1コード
gtag('config', 'UA-138256867-1');
</script>
ちょっと査定してもらってください。無料でさせるのは厚かましいというくらいの金額になると思います。
何を「ご教示」して欲しいのかをもっと具体的に書きましょう。
プログラムを全部考えてくれ、というのはNGです。
https://teratail.com/help/question-tips
https://teratail.com/help/avoid-asking
思うようにならなかったコードとどうなったかの結果を具体的に記載してください。
皆さんご返答ありがとうございます。
私の方でこちらのサイトの使い方が良く分かっておらず、
申し訳ありませんでした。
他のホームページのコードをコピーして、一部修正しただけのものなので、こちらでお見せ出来るようなものではなさそうです。
全部教えていただというのは、サイトの趣旨から外れているとのことでしたので、まずは自分で見ていただけるところまで作ってから具体的に質問をさせていただきます。
ご丁寧にありがとうございました。
>他のホームページのコードをコピーして、一部修正しただけのものなので、こちらでお見せ出来るようなものではなさそうです。
言い方はあれですが、質問者のコードを過度に期待している人はいませんし、
批判するような人もいないと思います。どんな形であれ、ご自身で対応されたものに間違いないですし、
むしろほぼ1から作れるような人って質問しないと思います。
実務で開発しているエンジニアも効率化のためにある程度目的の処理があれば
それをネットからコピペして一部修正するというのは日常茶飯事です。
なので、「他人に見せられるものかどうか」という判断でコードの提示を躊躇ってしまうと、
この手の特化した質問サイトは成り立ちません。
そこにあるのは「やりたいこと」があって「それに向けて組んでみたコード」があって「うまくいかなかった結果」があり、それに対して「どうやったら解決できるか」がアドバイスとしてつくだけです。
コードを提示することで勉強になることも多々あります（むしろ自身のコード提示がないとあまり勉強にならないことが多いです）
下記のような形で作ってみたのですが、折れ線グラフの入れ方が分からず、
質問をさせていただきました。
皆さんの仰るように、まずは自分で折れ線グラフの入れ方まで
やってから質問させていただくのが、宜しいでしょうか。
<!doctype html>
<html>
<head>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-138256867-1"></script>
<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" 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("１","２","３","４","５","６","７","８","９","０");
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("１","２","３","４","５","６","７","８","９","０");
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.015**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;
var result2 = textForm*(8.76**textForm2);
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>
コードありがとうございます。
ただ、コメント欄ですとマークダウンが利用できませんし、デフォルト非表示であるため目につきにくいです。質問を編集して追記してください。
https://teratail.com/help#about-markdown
ご丁寧にありがとうございます。
再度質問編集させていただきます。
「何」が「どのように」わからないのか、コードのどの部分で詰まっているのかなどを、出ているエラーなどと併せて、具体的に記述されたほうが回答を得られやすいと思います。
コメントありがとうございます。
web上に入力した数字をどうすればグラフに反映出来るのか伺いたかったのですが、まずは私自身でグラフ作成まで行い、改めて具体的に質問させていただければと思います。
ご丁寧にありがとうございました。
あなたの回答
tips
プレビュー
