あなたは誰ですか?

JS

これは、表示する文字列をユーザーが入力できるコードです。
思惑通り、ユーザーが対応してくれるとは限りません。

エラーが起きた場合、コードを修正します。

prompt(不完全)

ダイアログを表示します。ユーザーに文字を入力してもらいます。

function who() {
    let ans = prompt("お名前を教えてください。");
    if (ans.length == 0) {
        ans = "名無し";
    } 
    alert("こんにちは " + ans + " さん");

コードの解説

  1. 関数「ans」の宣言です
  2. 変数を宣言しています
  3. if文で、変数の値の長さをチェックします
  4. 変数の値がない場合、「名無し」を代入します
  5.  
  6. ダイアログに、変数の値を加工し、代入します
エラー発生
ボタンを押してダイアログが表示されたあと、キャンセルが押されると、ダイアログが表示されません。

調べると、次のエラー(抜粋)が表示されます。

TypeError: Cannot read properties of null (reading ‘length’)
at HTMLInputElement.OnButtonClick

コードでは、if文でダイアログが受けとった値の長さを調べています。
ダイアログでキャンセルが押されると、「null」という値を受け取ります。
この「null」の長さは測れませんというエラーメッセージです。

次回、修正したコードを表示します。

prompt(改良)

最初のコードで、不具合がでたのでコードを改良しました。
if文より、switch文がわかりやすいので、書き換えました。
ユーザーがダイアログのキャンセルボタンを押す場合に対応しました。

function who() {
    let ans = prompt("お名前を教えてください。");
    switch (ans) {
        case null: 
	    ans = "キャンセルされました。";
	    break;

        case "":  
        ans = "こんにちは, 名無しさん";
        break;

        default:		
        ans = "こんにちは、 " + ans + "さん";
    }
    alert(ans);
}

コードの解説

  1. 関数の宣言です
  2. 変数「ans」の宣言です
  3. switch文です。変数の値を調べます
  4. 変数の値が「null」の場合、次の行が処理されます
  5. 変数に「キャンセルされました。」文字列が代入されます
  6. break文で終了します
  7.  
  8. 変数が空欄の場合、次の行が処理されます
  9. 変数に「こんにちは名無しさん」文字列が代入されます
  10.  
  11.  
  12. 変数に文字が代入されている場合は、defaultが処理します
  13. ユーザが入力した値を加工して、変数に代入します
  14.  
  15. alertダイアログに変数の値が表示されます
  16.  

コード

タイトルとURLをコピーしました