詳しい人求む！

入力した値の積を表示するWEBページの作り方

解決済

質問者：usa3usa
質問日時：2019/10/23 16:55
回答数：2件

利用時間の入力欄に数字を入力すると請求額の欄に請求額を表示するＷＥＢページを書いてみましたが動きません。
やりたい事は、入力欄に"5"が入力されると
x="5" a="10" なので　文字列 "10*5"を Function()で評価して文字列"50"を作ってそれをaxに代入して、表示　”請求額 50 円"にする
ということです。

<p>
利用時間<input id="x" onclick="culc1()">分　　単価<input value="10" id="a">円／分　　請求額<input id="ax">円</p>

<script language="javascript" type="text/javascript">
var ax = document.getElementById("ax");
function calc1() {
ax.value = new Function(a + "*" + x)();
}
</script>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

ベストアンサー優先
最新から表示
回答順に表示

No.2ベストアンサー

回答者： fujillin
回答日時：2019/10/24 09:42

No1です

＞（改行されてしまい１行に表示されない点を除いて）
表示レイアウトに関することなので、CSSの指定を外せば1行表示になります。

＞C言語のような感じで書き直すこと出来ませんか？
＞～～の文字列を読み書きできる関数があれば、～～
申し訳ありませんが、当方はC言語の知識がありません。
文脈から推測して、getter、setter的なものがあれば良いのかと思い、それを定義して利用する形式にしてみました。
とは言っても、イベントの取り扱いなどは変わりませんので、基本的な構成は変わりません。

わかりにくいとのご指摘でしたので、匿名関数のネストは避けるようにしました。
また、今回は、省略形のアロー関数式の形式で記述してあります。
https://developer.mozilla.org/ja/docs/Web/JavaSc …

<!DOCTYPE HTML>
<html lang="ja">
<head><title>Sample</title>
</head>
<body>

<p>
<label>利用時間<input type="number" id="x" />分</label>
<label>単　価<input type="number" value="10" id="a" readonly />円／分</label>
<label>請求額<input type="number" id="ax" readonly />円</label>
</p>

<script type="text/javascript">
let D = {
get:(s)=>{ let v = D.elm(s).value; return v==""?0:v * 1; },
set:(s, v)=>{ D.elm(s).value = v; },
elm:(s)=> document.getElementById(s)
}

let calc = ()=>{ D.set("ax", D.get("x") * D.get("a")); }
D.elm("x").addEventListener("change", calc );
</script>
</body>
</html>

- 0
- 件

通報する

この回答へのお礼

再度の回答ありがとうございます
改行されずに１行になりました！

＞わかりにくいとのご指摘でしたので、匿名関数のネストは避けるようにしました。
＞また、今回は、省略形のアロー関数式の形式で記述してあります。
ありがとうございます。

読みましたが、やはり難しいですね。
アロー関数式も、混乱してきて、ギブアップです。
　function D(s) {
　function calc() {
でも良い気がしますが、慣れでしょうかね。C言語に馴染んだ私にとっては、混乱を招く記法の気がしてならないです。
var でなく let に変更も悩みました。別に var でも問題ない気が・・・

で回答いただきましたプログラムを参考に、試行錯誤した結果、２つの関数を定義することで解決しました。
<script type="text/javascript">
function D(s) { return document.getElementById(s)};
function calc(){ D("ax").value = D("x").value * D("a").value; }

D("x").addEventListener("change", calc);
</script>

　「D("ax").value 」を、「代入、読み出しができる変数 ax」　として扱えば、
C言語のようなプログラムが可能になるということのようです。

通報する

お礼日時：2019/10/24 13:58

No.1

回答者： fujillin
回答日時：2019/10/23 17:37

こんにちは

全体がわかりませんが、ひとまず、ご質問のような内容の一例です。
入力可能なのは、「利用時間」のみと解釈しました。

<!DOCTYPE HTML>
<html lang="ja">
<head><title>Sample</title>
<style type="text/css">
label{ display:block; }
</style>
<script type="text/javascript">
window.addEventListener("DOMContentLoaded", function(){
var D = function(s){return document.getElementById(s)};
D("x").addEventListener("change", function(){
D("ax").value = this.value * D("a").value;
});
});
</script>

</head>
<body>
<p>
<label>利用時間<input type="number" id="x" />分</label>
<label>単　価<input type="number" value="10" id="a" readonly />円／分</label>
<label>請求額<input type="number" id="ax" readonly />円</label>
</p>
</body>
</html>

- 0
- 件

通報する

この回答へのお礼

回答ありがとうございます

＞全体がわかりませんが、ひとまず、ご質問のような内容の一例です。
そうです！
（改行されてしまい１行に表示されない点を除いて）希望した動作になること確認出来ました。助かります。

でも・・　
function(){　の中に　function(){があり、プログラムが難しくて処理内容がよく理解出来ません（悲）。
もし可能ならば、C言語のような感じで書き直すこと出来ませんか？
変数a,x,axに<input id="a" <input id="x" <input id="ax" の文字列を読み書きできる関数があれば、後はC言語と同じようにプログラミングできるのですが・・・

通報する

お礼日時：2019/10/23 22:38

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！