ダブルクォーテーションで囲まれた複数の文字列を分割して配列に置き換えたい

Question

HTML、Javascriptを併用して組む初めてのプログラムです。

HTMLでformを作成し、ボタンを押すことでそのform内に文字列を入力するHPを作成しています。

<script type="text/javascript"><!--
function add(str)
{
	document.Form.textBox.value += str;
}
// --></script>

<form name="Form" id="id_form">
<input id="id_textBox1" type="text" name="textBox" value=""><br>
<input type="button" img src="./add.jpg" value="&quot;test1&quot;" class="btn" onClick="add(this.value)" ></button>
<input type="button" img src="./add.jpg" value="&quot;test2&quot;" class="btn" onClick="add(this.value)" ></button>
<input type="button" img src="./add.jpg" value="&quot;test3&quot;" class="btn" onClick="add(this.value)" ></button>
<input type="button" img src="./add.jpg" value="&quot;test4&quot;" class="btn" onClick="add(this.value)" ></button>
<input type="button" img src="./add.jpg" value="&quot;test5&quot;" class="btn" onClick="add(this.value)" ></button>

test1～test5の値はファイル名を指しており、下記コードの'data-file'に利用される想定です。

var file = this.getAttribute( 'data-file' ) ;

上記のフォームにて、test1,test2,test3,test4,test5,test4,test3,test2,test1の順でaddボタンを実行したと仮定します。
こちらで入力した文字列をJavaScript側で受け取り、ダブルクォーテーションで囲われたtest1～test5それぞれの値を順番通りに重複を許した状態で受け取り、別途用意した配列に受け渡すにはどのようなコードを組めばよろしいでしょうか。
また、その配列から一つずつ要素を参照し、各要素を'data-file'として利用する方法まで教えて頂けると幸いです。
ご教示よろしくお願いします。

Comments

[m.ts10806]

"→"に変換されていますけど、実際にそのように入っているのですか？それとも実際は""test1""のようになっているのでしょうか。

[Lhankor_Mhy]

『ダブルクォーテーションで囲われたtest1～test5それぞれの値』とは、ご提示のコードの場合、具体的には何ですか？　列挙していただくことは可能ですか？

[imohori708]

>Lhankor_Mhy様 具体的には以下の文字列です。"test1""test2""test3""test4""test5""test4""test3""test2""test1"

[imohori708]

>mts10806様 実際にエスケープ文字"で入力しています

[Lhankor_Mhy]

ということは、yambejpさんの回答で解決ということでしょうか？　解決されているならBA選択を、ご不明の点があればコメント欄にお書きになるといいでしょう。

[imohori708]

ご丁寧にありがとうございました。試行錯誤の末なんとかやりたいことが出来ました。ご丁寧に回答頂き、本当にありがとうございます。またなにかあればよろしくお願いします。

[Lhankor_Mhy]

すでに対応済みでしたか、失礼いたしました。ご解決されて何よりです。

Answer 1

とりあえずグローバル変数にpushするところから？

var list=[];
document.addEventListener('click',function(e){
  var t=e.target;
  if(t.classList.contains("btn")){
    list.push(t.value);
    console.log(list);
  }
});

<input type="button" img src="./add.jpg" value="&quot;test1&quot;" class="btn" ></button>
<input type="button" img src="./add.jpg" value="&quot;test2&quot;" class="btn" ></button>
<input type="button" img src="./add.jpg" value="&quot;test3&quot;" class="btn" ></button>
<input type="button" img src="./add.jpg" value="&quot;test4&quot;" class="btn" ></button>
<input type="button" img src="./add.jpg" value="&quot;test5&quot;" class="btn" ></button>

各要素を'data-file'として利用する方法

ご提示のソースに該当する箇所がないので答えようがありません

Comments

[imohori708]

ご回答頂きありがとうございます。
やや強引ではありましたが、String.split('""');で各要素を分け、出来上がったlist[0]とlist[listLength-1]の先頭と末尾をそれぞれ.sliceすることで配列に収めることが出来ました。
不慣れな質問にも関わらず、真摯に回答頂き誠にありがとうございました。