javascriptの関数化

以下の項目１～３を押したときの関数でのまとめ方がよくわかりません。
どなたかよろしくお願いいたします。


    <body>

      <button id="item1" name="item" value="item1">項目1</button><br>
      <button id="item2" name="item" value="item2">項目2</button><br>
      <button id="item3" name="item" value="item3">項目3</button><br>


      <script>
      

      </script>
    </body>

m.ts10806

2018/10/25 12:52

細かいかもしれませんけどなぜ「本日中に」なのでしょうか。あまり制限したり煽るような書き方は良くないですよ。あくまで要件を書くことのみに終始された方が答えやすいです。

行動規範の内容に同意します

回答2件

ベストアンサー

関数にまとめるにはまず、共通の部分と、それ以外を分けます。

今回は共通でない部分は「item1~3」と、URLの部分ですかね。
共通でない部分を引数にすればOKです。

↓こんな感じですかね。

JavaScript
1function hoge(id, url) {
2  var item = document.getElementById(id);
3  item.addEventListener('click',function(){
4    var xhr=new XMLHttpRequest();
5    xhr.open("GET",url,true);
6    xhr.send();
7  },false);
8}
9
10hoge("item1", "https:xxxxxxxxxxxxxxxxxxxXXXXXxxxxxxxxxxxx");
11hoge("item2", "https:xxxxxxxxxxxxxxxxxxxYYYYYxxxxxxxxxxxx");
12hoge("item3", "https:xxxxxxxxxxxxxxxxxxxZZZZZxxxxxxxxxxxx");
13

動かしてないので、参考まで。

投稿2018/10/25 12:48

mrkmyki

総合スコア325

間違ってたので修正しました

html
1<body>
2    <button id="item1" name="item" value="item1">項目1</button><br>
3    <button id="item2" name="item" value="item2">項目2</button><br>
4    <button id="item3" name="item" value="item3">項目3</button><br>
5
6    <script>
7        var args = [
8            {id: "item1", url: 'https:xxxxxxxxxxxxxxxxxxxXXXXXxxxxxxxxxxxx'},
9            {id: "item2", url: 'https:xxxxxxxxxxxxxxxxxxxYYYYYxxxxxxxxxxxx'},
10            {id: "item3", url: 'https:xxxxxxxxxxxxxxxxxxxZZZZZxxxxxxxxxxxx'},
11        ];
12        args.forEach((o) => {
13            var id = o.id;
14            var url = o.url;
15            var elem = document.getElementById(id);
16            elem.addEventListener('click', function () {
17                var xhr = new XMLHttpRequest();
18                xhr.open('GET', url, true);
19                xhr.send();
20            }, false);
21        });
22    </script>
23</body>