3

私はこれを持っています：

<select id="prio" class="w60">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>

別の値を選択すると、次のようonchange = function()に呼び出されます。

var prio = document.getElementById('prio');
var string1 = "Hello";
var string2 = "";

    prio.onchange = function () 
    {
        prioIndex = prio.options[prio.selectedIndex].text;
        switch (prioIndex) 
        {
           case '1': prioIndex = " my Friend";
                     break;
           case '2': prioIndex = " my Sister and Brother";
                     break;
           case '3': prioIndex = " my Mom and Dad";
                     break;
         }
       alert(prioIndex);
       string2 = prioIndex;
     }


alert(string2);

関数内のアラートは正常に機能しますが、彼は新しい文字列を割り当てません。

alert(string2)string2 (未定義) を示します。

string2関数の外で使いたい。しかし、割り当てられていないため、できません。しかし、理由はわかりません。

string2たとえば、別の onchange 関数で使用したいとします...

var string3;
news.onchange = function () 
{ 
   string3 = string2.concat(' how are you');
   alert(string3);
}

に割り当てstring3ます。string3onchange-function の外で使用したい場合はundefined.

4

2 に答える 2

1

これはalert(string2)、クリック ハンドラー内になく、prioクリックされたかどうかに関係なく 1 回だけ実行されるためです。string2クリックするたびに値を確認するには、内側に移動してみてください。

prio.onchange = function () 
    {
        prioIndex = prio.options[prio.selectedIndex].text;
        switch (prioIndex) 
        {
           case '1': prioIndex = " my Friend";
                     break;
           case '2': prioIndex = " my Sister and Brother";
                     break;
           case '3': prioIndex = " my Mom and Dad";
                     break;
         }
       alert(prioIndex);
       string2 = prioIndex;
       alert(string2);
     }
于 2016-01-07T15:33:52.100 に答える
0

JavaScript には「コールバック」と呼ばれるものがあります。コールバックは、コールバックが設定されている要素でアクションが発生したときに実行される関数です。したがって、関数は、HTML ページで要素onchangeを変更した場合にのみ実行されます。prio

つまり、HTML ページに移動し、 selectprio.onchange = function () { ... }要素をクリックしてその値を変更しない限り、実行されません。

したがって、そのコードがブラウザに読み込まれると実行されるのは次のとおりです (完全に正しいわけでstring2はありませんが、期待どおりに割り当てられない理由を理解するのに役立ちます)。

var prio = document.getElementById('prio');
var string1 = "Hello";
var string2 = "";
alert(string2);

問題が見えますか？右！！！string2が呼び出されると空alert(string2)です! :D

string2次のように、コールバック内から別の関数に渡すことで、必要なことを実行できます。

var foo = function ( val ) {
  alert('string2 value is: ' + val);
};

prio.onchange = function () {
  prioIndex = prio.options[prio.selectedIndex].text;

  switch (prioIndex) {
    case '1': prioIndex = " my Friend";
              break;
    case '2': prioIndex = " my Sister and Brother";
              break;
    case '3': prioIndex = " my Mom and Dad";
              break;
  }

  foo(prioIndex);
}

ただし、その情報を 2 つの異なるコールバックで使用したい場合は、必要なときにその値を取得する関数を定義できます。つまり：

var string2 = function () {
  var prio = document.getElementById('prio');
  prioIndex = prio.options[prio.selectedIndex].text;

  switch (prioIndex) {
    case '1': prioIndex = " my Friend";
              break;
    case '2': prioIndex = " my Sister and Brother";
              break;
    case '3': prioIndex = " my Mom and Dad";
              break;
  }

  return prioIndex;
}

var string3;
news.onchange = function () { 
  string3 = string2() + ' how are you';
  alert(string3);
}
于 2016-01-07T19:20:35.320 に答える