<span><div><input>いずれの値でも取得できる方法

いつもお世話になっています。
相変わらず、Javascriptについて教えてください。

単価：<span id='a1'></span> 円／個　
使用量<input type="number" id="x1")>個　
計<span id='ax1'></span> 円
や、
単価：<span id='a2'></span> 円／個　
使用量<span id='x2'></span> 個　
計<span id='ax2'></span> 円

単価：<input type="number" id="a3") 円／個　
使用量<span id='x3'></span> 個　
計<span id='ax3'></span> 円

で
cal_ax('a1','x1','ax1');
cal_ax('a2','x2','ax2');
cal_ax('a3','x3','ax3');
として使える関数cal_ax(A,X,AX)の作り方教えてください。

<script language="JavaScript">
function D(s) { return document.getElementById(s)};
function cal_ax(A,X,AX) {
var a = D(A).textContent;
var x = D(X).value;
var ax = parseInt(a)*parseInt(x);
D(AX).innerHTML = ax;
}
では、使用量Xがinputの場合しか対応できません。
よろしくお願いします。

No.3 ベストアンサー 回答者： Ogre7077 回答日時： 2019/11/12 13:32

変数に型はありませんが、オブジェクト自体にはプロトタイプ継承がありますので、

instanceof 演算子で input 要素であるか判断が出来ます。

function readD(id) {
var e = document.getElementById(id);
if (e === null) return null;
if (e instanceof HTMLInputElement) return e.value;
return e.textContent;
}

参考
https://developer.mozilla.org/ja/docs/Web/JavaSc …
https://developer.mozilla.org/ja/docs/Web/JavaSc …

この回答へのお礼

回答ありがとうございます。
なるほど、instanceof 演算子で型を判定して、分岐するのですね。
かなり素直なわかりやすい解決法、ありがとうございます。
参考にさせていただきます。

お礼日時：2019/11/12 16:20

No.2 回答者： yambejp 回答日時： 2019/11/12 09:59

> javascriptには変数の型がないので、上手くいくテクニック

単純に空要素だったとき右側が優先される処理です
console.log(0||""||false||null||undefined||1) // 結果：1
valueを持たない場合はundefinedなのでtextContentを参照しにいきます
もしvalueが""の場合もtextContentを参照してしまうので多少場合分けによる工夫が必要

この回答へのお礼

再度、回答ありがとうございます
「手を抜いた」という意味、なんとなくわかる解説ありがとうございます。
大変助かります。

お礼日時：2019/11/12 16:18

No.1 回答者： yambejp 回答日時： 2019/11/11 10:58

手を抜くとこんな感じ

<script>
function D(s) { return document.getElementById(s)};
function cal_ax(A,X,AX) {
var a = D(A).value||D(A).textContent;
var x = D(X).value||D(X).textContent;;
var ax = parseInt(a)*parseInt(x);
D(AX).innerHTML = ax;
}
window.addEventListener('DOMContentLoaded', function(e){
cal_ax('a1','x1','ax1');
cal_ax('a2','x2','ax2');
cal_ax('a3','x3','ax3');
});
</script>
単価：<span id='a1'>100</span> 円／個　
使用量<input type="number" id="x1" value="3">個　
計<span id='ax1'>0</span> 円
<hr>
単価：<span id='a2'>150</span> 円／個　
使用量<span id='x2'>5</span> 個　
計<span id='ax2'>0</span> 円
<hr>
単価：<input type="number" id="a3" value="200">円／個　
使用量<span id='x3'>2</span> 個　
計<span id='ax3'>0</span> 円

この回答へのお礼

回答ありがとうございます
何と
var a = D(A).value||D(A).textContent;
こんな書き方できるんですね。
javascriptには変数の型がないので、上手くいくテクニックでしょうかね。

確認ですが、||　は、C言語と同じで、
　左側のD(A).value　が偽の場合のみ　右側のD(A).textContent　が評価されて式の値になる
ということですね。

お礼日時：2019/11/12 08:20