function内のローカル変数をグローバル変数に代入したい

Question

前提・実現したいこと

javascript初心者です。
ゲームなどでよくあるように初めに名前を入力して、
それを変数nameとして格納して、以後表示していくようにしたいです。

現状、functionで入力された名前を取得しているのですが
ローカル変数として扱われてしまうためか上手く名前の表示ができません。
ローカル変数をグローバル変数として格納する方法はありますでしょうか。
取得した名前は配列で表示していく想定です。

初歩的な質問で申し訳ありませんが、宜しくお願い致します。

発生している問題・エラーメッセージ

get_name()で取得した値をvar textのnameに格納できない。

該当のソースコード

<div id="name_input">
<p>名前を入力してください</p>
<input id="name">
<input type="button" value="決定" id="input_btn" onclick="get_name()">
<span id="output"></span>
</div>

<div id="next_view"></div>

var name;

function get_name() {
name = document.getElementById('name').value;
document.getElementById('output').innerHTML = '入力した名前は' + name + 'です。<br><input type="button" value="この名前で決定する" id="input_btn2" onclick="confirm()">';
document.getElementById('input_btn').style.display="none";
}

function confirm(){
document.getElementById('name_input').style.display="none";
document.getElementById('next_view').innerHTML = text[0];
}

var text = [
  [name + 'さん、はじめまして'],
  [name + 'さん、おはようございます'],
  [name + 'さん、こんにちは']
];

試したこと

グローバル変数にローカル変数を代入しようとしたのですが、上手くいきませんでした。

Comments

[miyabi_pudding]

input#input_btnをクリックしても、nameに格納されないってことですか？
それとも、
input#input_btnをクリックしてもtext配列に反映されないってことですか？

[miyabi_pudding]

失礼しました。
text変数に反映されないってことですね。
質問文に書いておりましたね。
回答させていただきました。

Answer 1

name の値で変化させたいなら関数化する方法もあります。

function makeGreetingList(n){
  return [
    [n + 'さん、はじめまして'],
    [n + 'さん、おはようございます'],
    [n + 'さん、こんにちは']
  ];
}
console.log( makeGreetingList("Oh!G") );
console.log( makeGreetingList("Oh!Ba") );
console.log( makeGreetingList("Oh!Ni") );
console.log( makeGreetingList("Oh!Ne") );

※ご質問の本質とは異なりますが、コードに示されていますので、述べさせていただきます。
confirm() は標準で実装された関数と区別できるように実装しましょう。
オブジェクト汚染となっており、標準実装された機能が使えなくなっています。

Comments

[miyabi_pudding]

入力された名前に吹きました。

[AkitoshiManabe]

質問に 「ゲームなどでよくあるように」 とありましたので、遊ばねば！と、思った次第です。

[sgr_akmt]

ご回答ありがとうございました！
また、お礼が遅くなり失礼しました！

関数の注意点を教えていただきありがとうございます！
これまであまり気にしてこなかった点なので勉強になりました！

名前ははじめ気付かなかったのですが、気付いた瞬間に笑ってしまいました（笑）
まさか質問文のそこの部分を拾われるとは思わなかったです！

ご教示いただきありがとうございました！

Answer 2

var textの変数宣言処理が先に走り、処理がもうされないからです。
name自体はしっかり変更されているはずです。
（inoput#input_btnをクリックしさえすれば）

それ以降（クリックしたあと）の処理の時に、name変数を使用すれば、
しっかりと、入力した文字列がnameに入ってるはずです。

では、どうすれば先に定義したtextに反映できるか。
いくつ方法がありますが、オブジェクト型を使ったり、text変数を、動的にしたりするのが手取り早いでしょう。

// そもそものname情報を、オブジェクト型にして、参照が保持されやすい状態に
const infomation = {
  name: ''
};

// テキストを動的にするためのクラスを定義
class textsClass {
  this.texts = [];
  // テキストの中身を変更するメソッド
  textsValue() {
    this.texts = [
      infomation.name + 'さん、はじめまして',
      infomation.name + 'さん、おはようございます',
      infomation.name + 'さん、こんにちは'
    ];
  }
}
// 上記クラスを元にしたインスタンスを定義
const text = new textsClass();

function get_name() {
  infomation.name = document.getElementById('name').value;
  document.getElementById('output').innerHTML = '入力した名前は' + infomation.name + 'です。<br><input type="button" value="この名前で決定する" id="input_btn2" onclick="confirm()">';
  document.getElementById('input_btn').style.display="none";
  // テキストの中身を変更する関数を実行
  text.textsValue();
}

function confirm(){
  document.getElementById('name_input').style.display="none";
  document.getElementById('next_view').innerHTML = text[0];
}

// クリックした後の処理のどこかで、下記を実行
console.log(text.texts); // [ infomation.nameに入った文字列 + 'さん、はじめまして', infomation.nameに入った文字列 + 'さん、おはようございます', infomation.nameに入った文字列 + 'さん、こんにちは'];

って、作業依頼に答えてしまった。

Comments

[sgr_akmt]

早々にご回答いただきありがとうございました！
初心者なものなので、ご丁寧に順を追ってご説明いただいたので、大変分かりやすかったです！
今まで理解できてなかった箇所も勉強になりました！
本当にありがとうございます！