質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

2回答

7284閲覧

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

sgr_akmt

総合スコア5

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2019/12/17 06:01

前提・実現したいこと

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

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

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

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

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

該当のソースコード

html

1<div id="name_input"> 2<p>名前を入力してください</p> 3<input id="name"> 4<input type="button" value="決定" id="input_btn" onclick="get_name()"> 5<span id="output"></span> 6</div> 7 8<div id="next_view"></div>

javascript

1var name; 2 3function get_name() { 4name = document.getElementById('name').value; 5document.getElementById('output').innerHTML = '入力した名前は' + name + 'です。<br><input type="button" value="この名前で決定する" id="input_btn2" onclick="confirm()">'; 6document.getElementById('input_btn').style.display="none"; 7} 8 9function confirm(){ 10document.getElementById('name_input').style.display="none"; 11document.getElementById('next_view').innerHTML = text[0]; 12} 13 14var text = [ 15 [name + 'さん、はじめまして'], 16 [name + 'さん、おはようございます'], 17 [name + 'さん、こんにちは'] 18];

試したこと

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

miyabi_takatsuk

2019/12/17 06:19 編集

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

2019/12/17 06:24

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

回答2

0

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() は標準で実装された関数と区別できるように実装しましょう。
オブジェクト汚染となっており、標準実装された機能が使えなくなっています。

投稿2019/12/17 06:59

AkitoshiManabe

総合スコア5432

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

miyabi_takatsuk

2019/12/17 07:11

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

2019/12/17 07:20

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

2019/12/17 14:27

ご回答ありがとうございました! また、お礼が遅くなり失礼しました! 関数の注意点を教えていただきありがとうございます! これまであまり気にしてこなかった点なので勉強になりました! 名前ははじめ気付かなかったのですが、気付いた瞬間に笑ってしまいました(笑) まさか質問文のそこの部分を拾われるとは思わなかったです! ご教示いただきありがとうございました!
guest

0

ベストアンサー

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

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

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

javascript

1// そもそものname情報を、オブジェクト型にして、参照が保持されやすい状態に 2const infomation = { 3 name: '' 4}; 5 6// テキストを動的にするためのクラスを定義 7class textsClass { 8 this.texts = []; 9 // テキストの中身を変更するメソッド 10 textsValue() { 11 this.texts = [ 12 infomation.name + 'さん、はじめまして', 13 infomation.name + 'さん、おはようございます', 14 infomation.name + 'さん、こんにちは' 15 ]; 16 } 17} 18// 上記クラスを元にしたインスタンスを定義 19const text = new textsClass(); 20 21function get_name() { 22 infomation.name = document.getElementById('name').value; 23 document.getElementById('output').innerHTML = '入力した名前は' + infomation.name + 'です。<br><input type="button" value="この名前で決定する" id="input_btn2" onclick="confirm()">'; 24 document.getElementById('input_btn').style.display="none"; 25 // テキストの中身を変更する関数を実行 26 text.textsValue(); 27} 28 29function confirm(){ 30 document.getElementById('name_input').style.display="none"; 31 document.getElementById('next_view').innerHTML = text[0]; 32} 33 34// クリックした後の処理のどこかで、下記を実行 35console.log(text.texts); // [ infomation.nameに入った文字列 + 'さん、はじめまして', infomation.nameに入った文字列 + 'さん、おはようございます', infomation.nameに入った文字列 + 'さん、こんにちは'];

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

投稿2019/12/17 06:23

編集2019/12/17 08:40
miyabi_takatsuk

総合スコア9528

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

sgr_akmt

2019/12/17 13:47

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問