javascriptで計算の答えを整数にしたいのですが出来ません

Question

<input type="text" id="k" value="">好きな数字を入力してください<br>
答え：<input type="text" id="ans1" value=""><br>

<input type="button" value="計算" onclick="fncCalc();"><br>

[script]

function fncCalc(){

var x = 7823.38;

var k = document.getElementById('k').value;

var x1 = 2873.38;

var x2 = 395.08;

var ans1;

ans1 = parseInt(ans1);

if (k >= 300) {

document.getElementById('ans1').value = ( k - 300 ) * 28.8 + x;


} else if (k >= 120) {

document.getElementById('ans1').value = ( k - 120 ) * 27.5 + x1;

} else if (k >= 10 ) {

document.getElementById('ans1').value = ( k - 10 ) * 22.53 + x2;

} else if (k < 10) {

document.getElementById('ans1').value = 395;

} }

答えを整数にしたいのですがparseIntをどこに使えばいいかわかりません

途中の式は小数点ありで計算して答えだけ整数にしたいです

Comments

[m.ts10806]

parseIntについてはもちろん調べた上ですよね？マニュアルにも簡単なサンプルコードはあるし、それを参考にまず自分で試しては？試さないことには身に付きませんよ

[TreesShimi]

色々やりましたが上手くいきませんでした

[m.ts10806]

提示コードにparseInt()は1つもないので「色々やりました」が全く見えません。想定通り出ていないもので結構なので提示してください。質問者さんの画面を見ているわけではないので「うまくいきません」では何も伝わりません。エラーが出ていないか（ブラウザ開発ツールのコンソール確認）など試したことでおきた現象を書いてください。

Answer 1

こんにちは。

途中の式は小数点ありで計算して答えだけ整数にしたいです

という目的のためには、parseInt ではなく、 Math.floor() を使うとよいでしょう。

使い方としては、たとえば以下のように、計算結果を入れるための変数 ansを追加して、画面表示するときに、これに対して、Math.floor() を使います。

function fncCalc() {

    var x = 7823.38;
    var k = document.getElementById('k').value;
    var x1 = 2873.38;
    var x2 = 395.08;

    var ans = 0.0;
    
    if (k >= 300) {
        ans = (k - 300) * 28.8 + x;
    } else if (k >= 120) {
        ans =  (k - 120) * 27.5 + x1;
    } else if (k >= 10) {
        ans =  (k - 10) * 22.53 + x2;        
    } else if (k < 10) {
        ans = 395.0;
    }
    
    document.getElementById('ans1').value = Math.floor(ans);
}

※上記のコードを、https://jsfiddle.net/jun68ykt/0hg8qexf/19/ にも上げておきましたので、ご自身で修正を加えて動作確認されるとよいと思います。

以上参考になれば幸いです。

---

補足

小数点以下を切り捨てるのではなく、小数第一位を四捨五入した整数を得たい場合には、Math.round() を使います。

Comments

[TreesShimi]

回答ありがとうございます
この例の回答はこれが答えで間違いありませんが
document.getElementById('ans1').value = ${p}${(k - 300 ) * 28.8 + x}${i};
↑この場合だとどうすればいいですか
また別の質問になりますが回答よろしくお願いします

[jun68ykt]

> document.getElementById('ans1').value = ${p}${(k - 300 ) * 28.8 + x}${i};
>↑この場合だとどうすればいいですか

テンプレート文字列ではどうするか？というご質問だと思いますが、
以下のように、 ${ } の中でMath.floor() を使えばよいかと思います。

`${p}${Math.floor((k - 300 ) * 28.8 + x)}${i}`

[TreesShimi]

何度も回答ありがとうございます
大変助かりました

[jun68ykt]

解決されたようですね、よかったです！

Answer 2

途中の式は小数点ありで計算して答えだけ整数にしたいです

JavaScript に限らず、一般的な言語で小数点ありの計算を行うと、誤差が発生することが知られています。
・10^n倍+ちょっとした処理をして、意図する整数に直し計算する
・ライブラリを使用する
といったところが現実的な解になるかと。
関連する質問がありましたので、参考まで。

少数計算が正常に実行されない-teratail

Answer 3

まず問題をきちんと切り分けましょう。

質問者さまが聞きたいのは、実数を整数に変換する部分ということなので、
必要なコードはこれだけでしょう。
条件分岐などは関係ありません。

var x = 7823.38;
document.write(x); //7823 にしたい

問題部分だけを取り出したコードを作成することで、難しい問題でも一つずつ確実に解決していけるようになるはずです。
そのうえで、ご質問の答えですが、そもそもparseInt は必要ありません。

var x = 7823.38;
document.write(Math.floor(x)); //7823;

※Math.floor 関数は小数部を切り捨てる関数です。

あと、コードはキチンとインデントをつけて、読みやすく成形したほうが良いと思います。

Comments

[TreesShimi]

これだと計算の時、整数で計算されちゃうんじゃないですか？
計算の時は実数で計算して結果だけを整数にしたいんです