常連

注目の的

社会貢献

質問力

自己紹介

# やりたいこと
vueCLIを使用した際にコンポーネント内で、外部JSファイル定義した関数や変数を読み込みたいです。

# ディレクトリ構成
```
vueApp/
    ├─src/
    |   ├─components/
    |   ├─static/
    |   |   └─js/
    |   |       └─common.js
    |   |
    |   ├─App.vue
    |   └─main.js
    |
    └─vue.config.js
```

# 現状のソースコード
```vue
// App.vue
<template>
    <button @click='test'>test</button>
</template>

<script>
export default {
    data: () => {

    },
    methods: {
        test () {
            // common.js内のメソッドを読み込み
            commonTest()
        }
    }
}
```

```javascript
// common.js
function commonTest() {
    console.log('commonOK')
}
```

# 試したこと
以下の内容を試してみました。

## main.js内でcommon.jsの読み込み
以下のように、importもしくは、requireで読み込んでみたのですが、commonTest()はundefinedになってしまいました。
```javascript
// main.js
import common from '@/static/js/common'     // importのパターン
require('@/static/js/common')               // requireのパターン

new Vue ({
    common,
    render: h => h(App)
}).$mount('#app')
```

## コンポーネント内で直接読み込み
以下のように、コンポーネント内で直接importしてみたのですが、結果は同じでした。

```vue
// App.vue(※一部省略)
<script>
    import common from '@/static/js/common'
    export default {
        deta: () => {

        },
        methods: {
            commonTest()
        }
    }
</script>
```

以上、拙い文章で恐縮ですがどなたかご教授頂けると幸いです。

vueCLIで外部JSファイルを読み込む方法

### 質問事項

 JavaScript30という海外のJS勉強サイトで勉強をしている初心者です。
ビデオを見ながら学習をしていますが、"this"というものが出てきて、自分で調べたもののよくわかりませんでした。
以下のコードのthisが何を指しているのか、またどうすればこのコードのthisがどこを指しているのかなど自分で見分けたいので方法などありましたら教えていただけますでしょうか。
また、初心者がthisに関して勉強する場合はどのようにしたらよいのでしょうか。おすすめのサイトや書籍やYoutubeのビデオなどありましたら教えていただけると幸いです。

thisについて参考にした記事などは以下になります。
[https://qiita.com/takkyun/items/c6e2f2cf25327299cf03]

### 該当のソースコード
```javascript
const panels = document.querySelectorAll(".panel");

function panelOpen() {
  this.classList.toggle("open");
}
//ここのthisがどこに当たるのか、またどのようにして見分けるのかなど知りたいです。

panels.forEach(function(panel) {
  panel.addEventListener("click", panelOpen);
});


```

```HTML
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Flex Panels ????</title>
    <link
      href="https://fonts.googleapis.com/css?family=Amatic+SC"
      rel="stylesheet"
      type="text/css"
    />
  </head>
  <body>
    <style>
      html {
        box-sizing: border-box;
        background: #ffc600;
        font-family: "helvetica neue";
        font-size: 20px;
        font-weight: 200;
      }

      body {
        margin: 0;
      }

      *,
      *:before,
      *:after {
        box-sizing: inherit;
      }

      .panels {
        min-height: 100vh;
        overflow: hidden;
        display: flex;
      }

      .panel {
        background: #6b0f9c;
        box-shadow: inset 0 0 0 5px rgba(255, 255, 255, 0.1);
        color: white;
        text-align: center;
        align-items: center;
        /* Safari transitionend event.propertyName === flex */
        /* Chrome + FF transitionend event.propertyName === flex-grow */
        transition: font-size 0.7s cubic-bezier(0.61, -0.19, 0.7, -0.11),
          flex 0.7s cubic-bezier(0.61, -0.19, 0.7, -0.11), background 0.2s;
        font-size: 20px;
        background-size: cover;
        background-position: center;
        flex: 1;
        justify-content: center;
        align-items: center;
        display: flex;
        flex-direction: column;
      }

      .panel1 {
        background-image: url(https://source.unsplash.com/gYl-UtwNg_I/1500x1500);
      }
      .panel2 {
        background-image: url(https://source.unsplash.com/rFKUFzjPYiQ/1500x1500);
      }
      .panel3 {
        background-image: url(https://images.unsplash.com/photo-1465188162913-8fb5709d6d57?ixlib=rb-0.3.5&q=80&fm=jpg&crop=faces&cs=tinysrgb&w=1500&h=1500&fit=crop&s=967e8a713a4e395260793fc8c802901d);
      }
      .panel4 {
        background-image: url(https://source.unsplash.com/ITjiVXcwVng/1500x1500);
      }
      .panel5 {
        background-image: url(https://source.unsplash.com/3MNzGlQM7qs/1500x1500);
      }

      /* Flex Children */
      .panel > * {
        margin: 0;
        width: 100%;
        transition: transform 0.5s;
        border: solid 1px red;
        flex: 1 auto;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .panel > *:first-child {
        transform: translateY(-100%);
      }
      .panel.open-active > *:first-child {
        transform: translateY(0);
      }
      .panel > *:last-child {
        transform: translateY(100%);
      }
      .panel.open-active > *:last-child {
        transform: translateY(0);
      }

      .panel p {
        text-transform: uppercase;
        font-family: "Amatic SC", cursive;
        text-shadow: 0 0 4px rgba(0, 0, 0, 0.72), 0 0 14px rgba(0, 0, 0, 0.45);
        font-size: 2em;
      }

      .panel p:nth-child(2) {
        font-size: 4em;
      }

      .panel.open {
        font-size: 40px;
        flex: 5;
      }
    </style>

    <div class="panels">
      <div class="panel panel1">
        <p>Hey</p>
        <p>Let's</p>
        <p>Dance</p>
      </div>
      <div class="panel panel2">
        <p>Give</p>
        <p>Take</p>
        <p>Receive</p>
      </div>
      <div class="panel panel3">
        <p>Experience</p>
        <p>It</p>
        <p>Today</p>
      </div>
      <div class="panel panel4">
        <p>Give</p>
        <p>All</p>
        <p>You can</p>
      </div>
      <div class="panel panel5">
        <p>Life</p>
        <p>In</p>
        <p>Motion</p>
      </div>
    </div>

    <script src="index.js"></script>
  </body>
</html>

```

コードのthisが指している部分について

一部不具合を含んだコードや誤った記述があったため、質問を削除しました。再度調べ直して投稿します。

Railsのアプリケーションの中で使われているNode.jsのバージョンを変更したい

##やりたいこと
タイトルのまんまなのですが、
<router-link>を使用して,クリックするとリンク先が別タブで開くようなリンクを作りたいです。
ご存知の方いらっしゃれば教えていただけないでしょうか。
よろしくお願い致します。

【Vue.js】router-linkを使用して別タブで開くリンクを作りたい

Htmlのテキストボックスがあるとして、JavaScript のある関数を実行したらそこで自動で値が入るとした時に、
その値が変更されたら例えばアラートを出す、と言うようなことはできないのでしょうか？
onchangeでは、ユーザが手入力で変えた時のみ変わるので、テキストボックスの中のvalue値が変わるだけでは反応しないです。
テキストボックスの値を変える関数そのものは編集ができないとして、何か方法はありますでしょうか？
使えるものはよくてもJクエリーのみで、リアクトなどは使えないです。

JavaScriptでhtmlのテキストボックスの変化を監視する方法

### 前提・実現したいこと

Railsで記事を作成して、その情報をNuxtで表示させるサイトを作っています。

### 発生している問題・エラーメッセージ
ローカル環境では表示されますが、本番環境になるとAPIの読み込みがされず、ブラウザにAPIの情報が表示されません。

```
 TypeError: Cannot read property 'title' of undefined```
```
### 該当のソースコード

```_id.vue
<div class="contents-header">
                <h1>{{posts.title}}</h1>
      </div>

    export default { 

head(){
            return{
                title: this.posts.title,
            meta:[
             { hid: 'title', name: 'title', content: this.posts.title }
}

async asyncData({app,params,error}) {
                const {id} = params;
                const response  = await axios.get(`https://hogehoge.com/api/v1/posts/${id}`)
                .catch(err=> {
                    error({
                        statusCode: err.response.status,
                        message: err.response.data.message,
                        });
                        return err.response;
                     });
                const posts = JSON.parse(response.data)
                return {posts};
        },
}
```

### 試したこと

APIの呼び出しをmounted内に書いたら表示はされましたが、代わりにOGPが表示されなくなりました...
拙い説明ですいません。どうかよろしくお願いします。

Nuxtで作ったサイトが表示されない

### 前提・実現したいこと

`npm install vue-awesome-countdown --save`を実行すると、下記のような警告が出ました。
このパッケージを利用したいと思いコマンドを実行しました。


### 発生している問題・エラーメッセージ

```
% npm install vue-awesome-countdown --save                                            (git)-[master]
+ vue-awesome-countdown@1.0.23
added 58 packages from 65 contributors and audited 44351 packages in 14.714s

38 packages are looking for funding
  run `npm fund` for details

found 1 moderate severity vulnerability
  run `npm audit fix` to fix them, or `npm audit` for details
```

### npm audit　実行結果

```
% npm audit                                                                           (git)-[m
                                                                                
                       === npm audit security report ===                        
                                                                                
┌──────────────────────────────────────────────────────────────────────────────┐
│                                Manual Review                                 │
│            Some vulnerabilities require your attention to resolve            │
│                                                                              │
│         Visit https://go.npm.me/audit-guide for additional guidance          │
└──────────────────────────────────────────────────────────────────────────────┘
┌───────────────┬──────────────────────────────────────────────────────────────┐
│ Moderate      │ Cross-Site Scripting                                         │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Package       │ serialize-javascript                                         │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Patched in    │ >=2.1.1                                                      │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Dependency of │ vue-awesome-countdown                                        │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Path          │ vue-awesome-countdown > @vue/cli-service >                   │
│               │ copy-webpack-plugin > serialize-javascript                   │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ More info     │ https://npmjs.com/advisories/1426                            │
└───────────────┴──────────────────────────────────────────────────────────────┘
found 1 moderate severity vulnerability in 44351 scanned packages
  1 vulnerability requires manual review. See the full report for details.

erialize-javascriptの現在の利用しているバージョンに脆弱性があることは理解しました。

```
### num audit fix 実行結果

```
% npm audit fix                                                                       (git)-[master]
up to date in 8.991s

38 packages are looking for funding
  run `npm fund` for details

fixed 0 of 1 vulnerability in 44351 scanned packages
  1 vulnerability required manual review and could not be updated
```
manual reviewと書いてあるが、何をしたらいいのか分からないです。


### npm ls vue-awesome-countdown 実行結果
```
├─┬ @vue/cli-plugin-babel@4.1.2
│ └─┬ webpack@4.41.5
│   └─┬ terser-webpack-plugin@1.4.3
│     └── serialize-javascript@2.1.2  deduped
├─┬ @vue/cli-service@4.1.2
│ ├─┬ copy-webpack-plugin@5.1.1
│ │ └── serialize-javascript@2.1.2  deduped
│ └─┬ terser-webpack-plugin@2.3.2
│   └── serialize-javascript@2.1.2  deduped
├── serialize-javascript@2.1.2 
└─┬ vue-awesome-countdown@1.0.23
  └─┬ @vue/cli-service@3.12.1
    └─┬ copy-webpack-plugin@4.6.0
      └── serialize-javascript@1.9.1   <-- こいつが原因だと思っています。
```

### 補足情報（FW/ツールのバージョンなど）

```
% npm --v                                                                             (git)-[master]
6.13.6
```

他に、必要な情報があれば追記します。
現状次に何をすれば良いのかわかりません。
そもそも`npm`をあまり理解できておらず、依存パッケージのバージョン更新方法が
わかりません。

教えていただけますと幸いです。

npm install パッケージ名　をすると警告が出る

vuexのstore側にaxiosでapiのレスポンスを返すメソッドを作成しコンポーネント側で前述のメソッドを使用しレスポンスデータを受け取る事を目的としていますがうまくいきません。

```javascript
//store.js
...
actions: {
  returnAPI() {
    axios.get('hogehuga').then((response) => {
      return response
    })
  }
}

```

```javascript
//コンポーネント側
data() {
  return {
    ApiData: ''
  }
},
created() {
　//Promiseが返るがメソッド側と同じように.then()では取れない？
  console.log(this.createAPI())
},
methods: {
  ...mapActions([
    'returnAPI'
  ])
},
```
コンポーエント側でメソッドを呼んだところPromiseが返ってきているようですがメソッド側と同じように.then()ではレスポンスデータを取得できない？です。
こちらはどのようにすればうまく取得できるのでしょうか？お手数ですがご教授いただけると幸いです。

axiosでレスポンスを返すメソッドを作成したがコンポーネント側でうまく使用できない

```Javascript
[ 
  [NaN, NaN, NaN, NaN],
  [a1, b1, c1, d1],
  [a2, b2, c2, d2],
  [a3, b3, c3, d3],
  [a4, b4, c4, d4],
  ・・・
  ・・・
  [a300, b300, c300, d300],
  [NaN, NaN, NaN, NaN]
];
```
このような二次元配列の要素を10個ずつ足していき、新しい二次元配列を作りたいのですが、
縦に足していくやり方が分かりません。
言葉でうまく説明できないのですが、結果として得たい形は以下の通りです。
```Javascript
[ 
  [NaN, NaN, NaN, NaN],
  [a1+a2+・・・+a9+a10, b1+b2+・・・+b9+b10, c1+c2+・・・+c9+c10, d1+d2+・・・+d9+d10],
  [a11+a12+・・・+a19+a20, b11+b12+・・・+b19+b20, c11+c12+・・・+c19+c20, d11+d12+・・・+d19+d20],
  [a21+a22+・・・+a29+a30, b21+b22+・・・+b29+b30, c21+c22+・・・+c29+c30, d21+d22+・・・+d29+d30],
  ・・・
  ・・・
  [a291+a292+・・・+a299+a300, b291+b292+・・・+b299+b300, c291+c292+・・・+c299+c300, d291+d292+・・・+d299+d300]
  [NaN, NaN, NaN, NaN]
];
```
イメージとしては、
![イメージ](d4bfd806ea974dba41b1b0bb06dd2dd5.png)
という感じで縦に足していき、二次元配列としてまとめたいです。

具体的には私が持っている配列は下のように、最初と最後がNaNの要素になってしまっているため、
中の300行に対して和演算を行いたいです。
```Javascript
[ 
  [NaN, NaN, NaN, NaN],
  [a1, b1, c1, d1],
  [a2, b2, c2, d2],
  [a3, b3, c3, d3],
  [a4, b4, c4, d4],
  ・・・
  ・・・
  [a300, b300, c300, d300],
  [NaN, NaN, NaN, NaN]
];
```
for文を作ってみようとしたのですが、二次元配列になるとアルゴリズムを頭でイメージする事ができず、
混乱してしまいました。
また昨日似たような質問をして、たくさんの方々にお答えを頂いたので、
それを応用して考えようと努力はしたのですが、勉強不足で分かりませんでした。。。

分かりづらい文章で申し訳ありませんが、
どなたかご教示のほど、よろしくお願いいたします。

Javascriptで二次元配列の要素をN個ずつ縦に足していきたいです。

![IEのF5](587cbbc12a4bf8f7f44df29d5c6a537d.png)

大変初歩的なことだと思うのですが教えてください。

例えばログイン目的に、ユーザID・パスワードの２項目が入力必須になっているＷｅｂ画面があったとします。
ここに張り付けたダイアログのように、F5を押下すると、以前に入力されていた内容を送信してしまうようです。たとえ空であったとしても

F5でも、必須入力である牽制を行いたいのですが　JSでの対策は有効でしょうか？

HTMLでそれら必須入力の項目にrequired定義をしていますが、一度サーバ側でエラー判断が行われ、画面が再描画されると、入力項目は　空になっています。

その状態でF5が行われると、ユーザが入力していないにも関わらず、前回入力値がサーバ側に送信されてくる模様です。これをどうにかしたいです。

皆さんは　どういう対策をとられていますか

ブラウザがF5ボタンで再送信された場合、入力がなされていなくても、前回値が送信されてくる？？　その対策はどういうもの？

### 前提・実現したいこと

２つの配列を合わせて連想配列にしたい


### 該当のソースコード

```ここに言語名を入力
【main_drink.ctp】

<script>
・
・
・
console.log(drink);
//出力結果↓
//(3) ["お茶", "ジュース", "コーヒー"]
//0: "お茶"
//1: "ジュース"
//2: "コーヒー"

console.log(remaining);
//出力結果↓
//(3) ["15", "10", "5"]
//0: "15"
//1: "10"
//2: "5"

・
・
</script>
```

上記２つの配列を合わせて、
下記のような連想配列をJavaで作りたいのですが上手くできません。

[0] => Array (
[drink] => お茶
[remaining] => 15

[1] => Array (
[drink] => ジュース
[remaining] => 10

[2] => Array (
[drink] => コーヒー
[remaining] => 5

### 試したこと
varで定義して、２つの配列を合わせてみたり、

https://teratail.com/questions/231231
など参考ほか試しましたが思ったような配列が出力できませんでした。

javaで連想配列を作成したい..

タイトル通りなのですが、例えば条件式が
`hoge === '123'`みたいな条件式が１０個ぐらいな大量の場合にスマートな書き方ってあるのでしょうか？

現在はインデントを揃えて例えば
```javascript
if (obj_key === '1' || obj_key === '2' || obj_key === '3'
    || obj_key === '6' || obj_key === '5' || obj_key === '4'
    || obj_key === '7' || obj_key === '8' || obj_key === '9'
    || obj_key === '12' || obj_key === '11' || obj_key === '10'
    || obj_key === '13' || obj_key === '14'
    || typeof(obj_key) === 'number') {
```
こんな感じにしています。

この例だと比較対象が数字なのでちょっとは見やすいですが数字ではなく文字になったとき
更に醜くなると感じています。

こういった場合なスマートな書き方ってあるのでしょうか？

if文の条件式が複数あるときのスマートな書き方

![イメージ説明](bbe0980ddb38048d42c2b4ccfdc33db7.png)



![イメージ説明](5c7b4e000d1d4b4a43ab7b5a82411033.png)



具体的には入力フォームに書いた文章の中で、[「世界史の窓」](https://www.y-history.net/appendix/appendix-list.html)というサイトの記事タイトルと同じ単語を自動的にリンクテキストにし、ワンクリックでサイトへ行けるようにしたいです。


例：ローマ帝国の範囲は全地中海世界に及び、イタリア半島以外の領土として属州を支配した。



→[ローマ帝国](https://www.y-history.net/appendix/wh0103-069.html)の範囲は全[地中海世界](https://www.y-history.net/appendix/wh0102-002_1.html)に及びイタリア半島以外の領土として[属州](https://www.y-history.net/appendix/wh0103-027.html)を支配した。



現在私が試しているやり方は、すべての記事タイトルとリンクのhtmlタグの組み合わせを事前に設定して置換するという力技のものです。ですが、プログラミング初心者で見様見真似で行った結果、置換して出力されるのはhtmlタグのままの状態となってしまいました。


置換した結果がリンクテキストの状態で表示されるようにする方法、あるいはもっと力技でない効率的なやり方、アプローチ等ありましたらご教授いただけると幸いです。　よろしくお願いいたします。

```
<html>
<head>
<title>単語をリンクテキストに置換</title>
    <script language="JavaScript">
    
    </script>
    </head>
<body>

<form name="form1">
    <h1 style="font-size:20px">単語をリンクテキストに置換</h1>
    <textarea name="text" rows="0" cols="10"></textarea><br>
    <br>
    <input type="button" onClick="replace()" value="置換">
</form>
</body>
</html>
```

Javascriptによる置換で特定の単語をリンクテキストにしたいが、htmlタグのまま表示されてしまう

標題の件、Vue.jsで以下のコードを記述時に
Use array destructuringのエラーが発生しています。

動作的には、問題なく動いているのですが
なぜこの記述がESlintエラーとされているのか、腑に落ちない点があったため質問させていただきました。

```.vue
    //　対象のコード
    hoge(e) {
      this.hogeState = e.target.files[0];
    },
```

**【質問】**
①：なぜ破壊的な処理だとされているのか？
②：このルールの正しいコードの例（ESLint公式参照）
：// With `array` enabled
var [ foo ] = array;
var foo = array[someIndex];
上記のように書いたら、１行増えるし、冗長かと感じています
どうでしょうか？
③：②はvue.js（this.hogeState）に置き換えると
どう記述するのが良いでしょうか？


（参考）ESLint公式（Use array destructuringについて）
https://eslint.org/docs/rules/prefer-destructuring


よろしくお願いいたします。

【JavaScript/ESLint】Use array destructuringエラーが発生している（処理的には問題ない）

JavaScriptのアロー関数について、わからない表現がでてきたので、質問させてください。

Reactのコードを読んでいたら以下のような表現がでてきました。

```
const navigateOnce = getStateForAction => (action, state) => {
  const { type, routeName } = action;

  if (state && type === NavigationActions.NAVIGATE) {
    
    //直前のrouteNameと遷移先のrouteNameが同じであれば遷移無効化
    if(routeName === state.routes[state.routes.length - 1].routeName) return null;

  }
  return getStateForAction(action, state);
};
```

アロー関数は `A = (args...) => {}` という表現かと思っていたのですが、 
今回は `A = B => (args ... ) => {} ` となっており、AとBの関係をどう解釈すれば良いかわからない状態で困っています。Aの後にBを実行するのか？　A=Bとして同じ関数とみなすのか？ ... 混乱しております。どなたかアドバイスいただけますでしょうか。。よろしくお願いいたします。

(JavaScript) アロー関数について

Webフォントをcssとhtmlの中で利用してページを作りましたが、読み込みまでに予備のフォントが表示されるいわゆるちらつき現象が直りません。

独力でもあれこれ調べてみましたが
・visibilityをいじる→いつまでも表示されなくなる
・font-displayをautoに→動作は変わらずちらつきアリ
と上手くいきません。
JavaScriptを導入することは利用している制作サイトのホストから制限されているようで、そもそもscriptタグが弾かれてしまいました。

これ以上は何の対応もできないものでしょうか？
font-displayが反映されない(されないように見える)理由などにお心当たりがありましたら、どうかご教示ください。



**11/11追記**

使用しているのはGoogle web fontとローカルにDLしたものをサブセット化したものの二種類(それぞれ1種ずつ)です。

```CSS
@import url('～&display=auto');
@font-face{font-family:'font-n';src: url('～.woff2') format('woff2');font-display:auto;}
```

optionalにも変更してみましたが、代替フォント(通常フォント？)の表示時間がむしろ長くなってしまいました。

初心者ですので見当違いな追記になってしまっていたら申し訳ありません。
引き続きよろしくお願いいたします。

Webフォントのちらつきについて

### 前提・実現したいこと

発火はボタンの親のdivでする事が前提です。
イベントバブリングされる事が前提です。

### 発生している問題・エラーメッセージ

どちらかのボタンを押すと発火するコードですが関数func_Aで、どちらのボタンが押されたかを判別したいです。
宜しくお願い致します。

### 該当のソースコード

```js jquery
ソースコード
        <div onClick="func_A();">
        　　<input type="button" value="button1">
　　　　　　 <input type="button" value="button2">
        </div>

        <script>
        function func_A(){
          alert("発火");
        }
        </script>

jqueryで、どちらのボタンが押されたかを判別したい（イベントバブリング）

JavaScriptにおいて文字列の◯番目から△番目を他の文字列に置換させたくて調べていたのですが、やり方がどうも見つかりません。特定の文字列を検索して置換する方法はいくつもヒットするのですが指定された位置から指定範囲を置換する方法が見つかりませんでした。
そもそものそのような関数はないのでしょうか。最初は指定箇所以外を切り取って別で連結させる方法をとっっていたのですが非効率な気がし、やり方を調べていて今に至った形です。

回答よろしくお願いします


**補足**
質問中の“非効率なやり方”とは
```JavaScript
var str = "Hello,World!";
console.log(str);
var str_1 = str.substr(0, 6) //"Hello"を切り出し
var str_2 = str.substr(11, 1); //"!"を切り出し
str = str_1 + "Japan" +　str_2;
console.log(str); //“Hello,Japan!”と出力
```
以上のようなコードでした。

また、位置の指定による置換をしたいのは、置換したい文字列が全体に複数ある場合に対応するため、また、ある程度規則性がある文字列の中で置換するので開始位置が変わらないという点からこのような手段を取りたかったのです

JavaScriptによる文字列置換

JavaScriptで描写したグラフを保存したいです。
保存自体は出来たのです、１ページに複数の画像があると、なぜか処理が最後の要素にしか効きません。
プログラミング自体が素人なので要領を得ない部分があるかと思いますが、アドバイス頂けると幸いです。

JavaScriptで描写したグラフを画像として保存したいのですが、１ページに複数のグラフがある場合、最後のグラフにしか処理が効かない問題を解決したい。

clickすると生成されるdomにappendChildするchrome-extenstion開発してます。

event(click)に生成されるdomを
event前にquerySelectorする方法はありますか？

以下はサンプルコードです

```html
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="./index.css">
    </head>
    <body>
        <div id="wrap">
            <div id="target"></div>
            <button id="mybutton" class="button">button</button>
        </div>
        <script src="index.js"></script>
    </body>
</html>
```


```js
const button = document.getElementsByClassName("button")[0];
var myfunc = function() {
  console.log("addEventListener added");
  const targetDiv = document.createElement("div");
  targetDiv.className = "target2";
  const newContent = document.createTextNode("target2!");
  targetDiv.appendChild(newContent);

  const target = document.getElementById("target");
  target.appendChild(targetDiv);
};

button.addEventListener("click", myfunc);
```


buttonクリック時に生成されるclassNameがtarget2のdivでありますが、
クリック前に該当domをquerySelectorしたいです。

**つまり、今は存在しないが、eventによって生成されるdomを取得したいです。**

不可能な場合、
target2が追加される親DOMを監視して何らかのDOMが追加されたら該当DOMを取得する方法はありますか？