関数の呼び出し時に、対象の要素だけを変更することはできるのでしょうか？

Question

下記のように3つのバージョンがある場合、クリックするボタン要素やチェックするinputタグが別の物になるのですが、
両方バージョンを実行すると1と2が反応したり、こちらを実行したことになってしまう問題があります。
このような場合対象の要素だけを変更しないといけないですが、そのようなことはできるのでしょうか？
関数の呼び出し時に引数にID名を入れたりしても、対象の要素のみを変えることはできないですよね。

shoppingCalcの計算関数を定義。（バージョン1と両方バージョンで使う）
shoppingGramの計算関数を定義。（バージョン2と両方バージョンで使う）



//バージョン１
shoppingCalcの計算用の値を取得
let shoppingCalc = document.getElementById('shoppingBtn').onclick = () => {
shoppingCalcの計算関数を呼び出す。
shoppingCalcの計算結果を表記。
};



//バージョン２
shoppingGramの計算用の値を取得
let shoppingGram = document.getElementById('shoppingBtn').onclick = () => {
shoppingGramの計算関数を呼び出す。
shoppingGramの計算結果を表記。
};


//上記両方バージョン
let getIdshoppingBtn= document.getElementById('shoppingAllBtn');
let shoppingCalcAll = getIdshoppingBtn.addEventListener('click', ()=> {
    shoppingCalcの計算関数を呼び出す。
    shoppingGramの計算関数を呼び出す。
  shoppingCalcの計算結果と、shoppingGramの計算結果を上記と別の所に表記
});

Comments

[maisumakun]

質問文から、具体的に「どういう動作」をすれば正しいのかが読み取れません。 「両方バージョン」ではどのような動作をさせたいのでしょうか。単純に「両方のイベントコールバックを実行する」だけでいいのでしょうか。

[退会済みユーザー]

わかりにくくてすいません。もう少し具体的に記載しました。まだ必要な部分があれば教えてください。

[kei344]

getIdshoppingBtn や shoppingCalcGram など未定義のものがあるので、書かれている状況が再現するコード（HTML/JavaScript）を提示されたほうが回答を得やすいと思います。

[退会済みユーザー]

足りない情報を追加しました。

[退会済みユーザー]

他の方にも伝わるようにこちらにもコメントします。HTMLの方もお伝えしないと伝わりませんで失礼しました。 バージョン１ バージョン２ 両方のバージョンが同じ値を使って計算し同じ場所に結果を表記するのであれば 仰る通りですが、 それぞれinputに入力するpriceやgramが独立していて、計算結果も、それぞれの場所に表記したい場合は、同じinputを参照したり、両方バージョンのボタンを押すとバージョン2にも結果が出てしまうと問題ですよね。 つまりそれぞれを分離独立させたいという事です。 その場合両方バージョンがバージョン１と2と同じ場所を参照しないようにして、 しかも始めの関数を再利用するためには、どのようにIDを取得すれば実現できますかという事をお聞きしたかったのです。 説明不足で大変恐縮ですが、同じ関数を使うが対象のID要素だけは変更するという事は実現できないので、 同じ関数を使うことを諦めて、バージョン数分同じ関数を記載してその中にあるID要素だけを変更する方法しかないでしょうか？

[kei344]

HTMLはどうなっていますか？

[退会済みユーザー]

「情報を取ってくる」「表示する」はやはり対象の要素が違うので再利用はできず、 三つ分作らないといけないが、 「計算する」だけは共有できるのでここだけ関数にして再利用する方法があるという事ですね。 やはり違う要素を自動変換するようなことはできませんね。こちらが結論のようですね。理論上不可能であればそれでいいです。ありがとうございました。

Answer 1

イベントハンドラ関数の設定パラメータを外部から受け取るようにすればいいのではないかと。
一つは対象の要素の data-* 属性に埋め込む方法。

<input id="calc" type="button" value="calc" data-calc="true" />
<input id="gram" type="button" value="gram" data-gram="true" />
<input id="calc-gram" type="button" value="calc+gram" data-calc="true" data-gram="true" />

もう一つは addEventListener の第二引数のオブジェクトに埋め込む方法。

<input id="calc" type="button" value="calc" />
<input id="gram" type="button" value="gram" />
<input id="calc-gram" type="button" value="calc+gram" />

<script>
'use strict';
const shoppingCalc = (a, b) => a + b;
const shoppingGram = (a, b) => a * b;
function handleEvent (event) {
  var a = 3, b = 2;

  if (this.calc) {
    console.log('calc', shoppingCalc(a, b));
  }

  if (this.gram) {
    console.log('gram', shoppingGram(a, b));
  }
}

document.getElementById('calc').addEventListener('click', {calc: true, handleEvent: handleEvent}, false);
document.getElementById('gram').addEventListener('click', {gram: true, handleEvent: handleEvent}, false);
document.getElementById('calc-gram').addEventListener('click', {calc: true, gram: true, handleEvent: handleEvent}, false);

Re: saiboutai さん

Comments

[退会済みユーザー]

ありがたいです。ちょっと手が離せなくなったので、また後で見せてもらいますね

[退会済みユーザー]

難しいですね。
data-* 属性を使えばこのdata-* 属性がある要素を指定できるようなので

document.getElementById('calc').addEventListener('click', {calc: true, handleEvent: handleEvent}, false);
とは第二引数にオブジェクトでプロパティ名と値を記載すると、
下記と完全一致した時のみcalcIDの要素を取得できるという事でしょうか？
value="calc" data-calc="true"

一つでも当てはまらなければ取得しないで、計算は実行されないので、
上記一つを複数の計算で共有しても、干渉をしないで、使いまわせるという事でよろしいでしょうか？

[退会済みユーザー]

https://codepen.io/anon/pen/pejBVe
に再現したのですが、ボタンののみで、値を入力する欄がありませんが、
値を入れる欄は別途作るという事でしょうか？

[think49]

> data-* 属性を使えばこのdata-* 属性がある要素を指定できるようなので
data-* 属性の手法については「オブジェクトに埋め込む手法で this.calc」で参照していたパラメータを getAttribute や element.dataset に置き換えて下さい。

> 値を入れる欄は別途作るという事でしょうか？
そうですね。
質問の本題は「イベントハンドラ関数を3つ作るのを避けたい」なので、値の入力処理は質問文になかった事もあってあえて触れませんでした。
既存のコードがあるはずなので、提案した手法を既存コードに上手く組み込んでみてください。

[退会済みユーザー]

初心者なのでオブジェクトに埋め込む手法というのが難しくてよくわかりませんが

＞＞＞
data-* 属性を使えばこのdata-* 属性がある要素を指定できるようなので

document.getElementById('calc').addEventListener('click', {calc: true, handleEvent: handleEvent}, false);
とは第二引数にオブジェクトでプロパティ名と値を記載すると、
下記と完全一致した時のみcalcIDの要素を取得できるという事でしょうか？
value="calc" data-calc="true"

この認識でだいたいあってはいるのですね？

[退会済みユーザー]

その後調べて自分でdataのサンプルを作ったのですが、JSの変数の二つ目が、
getAttributeがundefiedと出てしまいます。
どこに間違えがあるかご存知でしょうか？

https://codepen.io/anon/pen/Qpymwx?editors=1112

[退会済みユーザー]

再質問にした方が良いでしょうか？
そうであれば再質問にします。

Answer 2

質問を編集しているうちに、ほぼ答えにたどり着いたようにも見受けられます。

つまり、計算部分と表示部分は分離して、計算部分だけを両方計算するところで使えばいいわけです。

Comments

[退会済みユーザー]

HTMLの方もお伝えしないと伝わりませんで失礼しました。

バージョン１
バージョン２
両方のバージョンが同じ値を使って計算し同じ場所に結果を表記するのであれば
仰る通りですが、
それぞれinputに入力するpriceやgramが独立していて、計算結果も、それぞれの場所に表記したい場合は、同じinputを参照したり、両方バージョンのボタンを押すとバージョン2にも結果が出てしまうと問題ですよね。
つまりそれぞれを分離独立させたいという事です。

その場合両方バージョンがバージョン１と2と同じ場所を参照しないようにして、
しかも始めの関数を再利用するためには、どのようにIDを取得すれば実現できますかという事をお聞きしたかったのです。
説明不足で大変恐縮ですが、同じ関数を使うが対象のID要素だけは変更するという事は実現できないので、
同じ関数を使うことを諦めて、バージョン数分同じ関数を記載してその中にあるID要素だけを変更する方法しかないでしょうか？

[maisumakun]

「情報を取ってくる」「計算する」「表示する」の3つに分ければ、真ん中は再利用可能です。

[退会済みユーザー]

「情報を取ってくる」「表示する」はやはり対象の要素が違うので再利用はできず、
三つ分作らないといけないが、

「計算する」だけは共有できるのでここだけ関数にして再利用する方法があるという事ですね。
やはり違う要素を自動変換するようなことはできませんね。