配列の値に入れたものを使いたい

Question

num_1にフォームの値を配列に入れることはできています。
その入れたnum_1をtalker2で使うにはどうしたらいいでしょうか
現状のままだと、num_1が定義されていないとエラーがきます

<div class="outline">
          <div class="roulette" id="talker_roulette"ルーレット"</div>
          <br />
          <input type="button" value="スタート" id="talker2"     onclick="talker2();"/>
          <input type="button" value="ストップ" id="talker2_2"   onclick="talker2_2();"/>
<input type="text" id="add-name" size="50"  placeholder="" ><button id="add-button">add</button>
          
```jav
```javascript
function () {
const addNameButton = document.getElementById('add-button')
let num_1 = [];
addNameButton.addEventListener('click', () => {
const input = document.getElementById('add-name');
const li = document.createElement('li');
li.innerText = input.value;
const ul = document.querySelector('ul');
ul.appendChild(li);
let name = input.value
num_1.push(name)
});
}

function talker2() {
talker_roulette = setInterval(function () {
document.getElementById("talker2").disabled = true;
var idx = Math.floor(Math.random() * num_1.length);
document.getElementById("talker_roulette").innerHTML = num_1[idx];
}, 100);
};

function talker2_2() {
document.getElementById("talker2").disabled = false;
if (talker_roulette) {
clearInterval(talker_roulette);
}
}

Comments

[m.ts10806]

質問内容がほとんどありません。
質問は編集できるのでなるべく質問テンプレートを利用し、要件と起きている問題、調べたこと試したことを記載して句d債。

[think49]

過去質問
https://teratail.com/questions/297826
https://teratail.com/questions/297573

[think49]

過去質問の「配列に値を入れる問題」から解決しましょう。
値を入れなければ、取り出せません。

[ikikikoko]

すみません。質問記入してたやつが反映されておらずあのような形で投稿されていました。
過去質問の「配列に値を入れる問題」自己解決しました・今から解決すみにします

[think49]

> function () {

SyntaxErrorになりそうですが、質問に書いたコードは本当に動きますか？

> const addNameButton = document.getElementById('add-button')
l
id="add-button'" がHTMLに存在しません。

---
質問前に「自分が書いた内容だけ」て再現する事を確認して下さい。
HTML一つに再構築すると確実です。
https://ja.stackoverflow.com/help/minimal-reproducible-example

[ikikikoko]

うつしもれていたので追記しました。ルーレットの方は配列に値入れていたら問題なく動きます。なので配列に値を入れれたのでその値をtalker2で使える方法を教えていただきたいです

[think49]

今は手元に検証環境がありませんが、

> function () {}

この書き方で無名関数式の定義は不可能なはずで、しかも動いたとしても呼び出していないので、何も実行されないのが正解なんですよね。
何かしら動いているのなら、「ここに書いたコードだけでは、実験してない」としか思えないです。

Answer 1

こんにちは。

変数num_1ははじめの関数内で定義されている為、その外となるtalker2関数からは参照出来ません。
このあたりについては「変数のスコープ」などのワードで検索をかけると出てくると思います。ご自分で調べてみて下さい。

解決方としては

• スコープを持たないvarを使う
• 変数をグローバル空間で宣言する

の2通りがありますが、前者はスパゲッティ化するので強く非推奨です。
以下に後者の方法のコードを提示します。

let num_1 = [];

function () {
const addNameButton = document.getElementById('add-button')
// let num_1 = []; →宣言をグローバル空間に移動
addNameButton.addEventListener('click', () => {
…以下略

Comments

[ikikikoko]

ありがとうございます！！できました