フォームで入力した値を取得し表示したい

Question

やりたいこととしては
①に記入した値を②に表示しそれをルーレット形式で表示していきたい

・フォームの書いた値を取得
・配列の値をルーレットで回すところまでは準備できているが

フォームの値を配列に入れるやり方を教えていただけますでしょうか

　　div class="roulette" id="roulette">①</div>
        <br />
        <input type="button" value="スタート" id="start" onclick="start();"/>
        <input type="button" value="ストップ" id="stop" onclick="stop();"/>
      </div>  
 <input type="text" id="add-name" size="50"  placeholder="②" ><button id="add-button">add</button>

window.onload = function() {
const addNameButton = document.getElementById('add-button')
addNameButton.addEventListener('click', () => {
const input = document.getElementById('add-name');

 
});
}

// ルーレット
var roulette;
const List1 = ['', '', '','',' '];
 // ルーレットを開始
function start() {
roulette = setInterval(function() {
  document.getElementById("start").disabled = true;
 
  var idx = List1[Math.floor( Math.random() * List1.length )];
  // ルーレット
  document.getElementById("roulette").innerHTML = idx;
}, 100);
}

// ルーレットを停止
function stop() {
document.getElementById("start").disabled = false;
if(roulette) {
  clearInterval(roulette);
}
}

Comments

[firegrape]

htmlを全部書いてほしいです。

[firegrape]

ありがとうございます。
const inputのinputに配列が入っていて、const List1
のそれぞれの5つに値を入れたいという質問であっていますか？

[ikikikoko]

ありがとうございます。
[]の配列の枠は予め個数を確定しなければならないのでしょうか。入力した分だけシャッフルできるよにしたいのですが....

[firegrape]

確定しないでもできると思いますよ。

[ikikikoko]

ではもし、やり方教えてくだされば嬉しいです...

[firegrape]

はい、なので自分の質問にも答えていただけると。
↓これです。
>const inputのinputに配列が入っていて、const List1
>のそれぞれの5つに値を入れたいという質問であっていますか？

[ikikikoko]

あ、ごめんなさい！そうです！

[firegrape]

const List1 = input.value
シンプルにこれではダメでしたか？

[ikikikoko]

やってみます

[ikikikoko]

今Javascriptは二つの文に分かれているのですが
それをくっつけて書くということでしょうか？？

[firegrape]

くっつけるというか、
var roulette;
const List1 = ['', '', '','',' '];

↓

var roulette;
const List1 = input.value;

こんなかんじです。

[ikikikoko]

const List1 = input.value;配列に入レたやつをルーレットに使いたいのですが上を書いてもエラーが出てしまいます。

addボタン押した時にイベント発火で、input_messageを配列に追加？
どこに入れたらいいのでしょうか..
サンプルコードいただけたら嬉しいです,,,

[m.ts10806]

Ruby on Railsは本件とどう関係するのでしょうか。

[m.ts10806]

質問者さん。
ちなみにfiregrapeさんは非常に雑な回答を繰り返す方で、今回言ってることも結構間違ってます。
回答者側の指摘も無視する方なので、あまり取り合わないほうが良いかと思います。

[m.ts10806]

ひとまずconstは再代入できないということだけ。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/const
色々と見直すところは多そうです（時間見つけてどこかで回答します）

[firegrape]

まず、エラー内容と
console.log(input.value)
の結果が欲しいです。