<select>の値をonchange（this.value）で選択します

各変更時に選択値を取得しようとしていますが、これをjavascriptのコンソールに記録しようとしましたが動作しません問題のコードの一部...私はプログラミングに新しいです単純な答えを保管してください...おかげ<select>の値をonchange（this.value）で選択します

function add(x) { 
 
    var selection = x; 
 
    console.log(x); 
 
}

<select class="seletion" onchange="add(this.value)"> 
 
       <option value="a">A</option> 
 
       <option value="b">B</option> 
 
       <option value="c">C</option> 
 
       <option value="d">D</option> 
 
       <option value="e">E</option> 
 
       <option value="f">F</option> 
 
       <option value="g">G</option> 
 
       <option value="h">H</option> 
 
       <option value="i">I</option> 
 
       <option value="j">J</option> 
 
       <option value="k">K</option> 
 
       <option value="l">L</option> 
 
       <option value="m">M</option> 
 
       <option value="n">N</option> 
 
       <option value="o">O</option> 
 
       <option value="p">P</option> 
 
       <option value="q">Q</option> 
 
       <option value="r">R</option> 
 
       <option value="s">S</option> 
 
       <option value="t">T</option> 
 
       <option value="u">U</option> 
 
       <option value="v">V</option> 
 
       <option value="w">W</option> 
 
       <option value="x">X</option> 
 
       <option value="y">Y</option> 
 
      </select>

出典

2016-12-30 user2777173

はあなたがどういう*「それは動作しません」：その名は、例えば、ADD1したり、ウィンドウオブジェクトに添付グローバル関数としてそれを呼び出す

変更*？関数名 'add'を使用することはできません – NewToJS

Run code snippetをクリックして何かを選択してください。エラーが表示されます。 –

はい、コンソールが空白です...なぜそれがまだ空白であるのかわかりません、それぞれの変更の値を表示する必要があります – user2777173

ANSWERのUPDATE

に以下を追加する方法を<select> の 'のonchange' ハンドラをあなたが見ることができます削除します。

add（）tに要素を追加します。このselect要素のオプション要素の集合。

これはあなたのものではなく、あなたのものである機能です。を追加

var opt1 = document.createElement("option"); 
 
opt1.value = "1"; 
 
opt1.text = "Option: Value 1"; 
 

 
function add (x) { 
 
    var selection = x; 
 
    console.log(x); 
 
}

<select class="seletion" onchange="add(opt1);console.log('New option added at the end')"> 
 
    <option value="a">A</option> 
 
    <option value="b">B</option> 
 
    <option value="c">C</option> 
 
    <option value="d">D</option> 
 
    <option value="e">E</option> 
 
    <option value="f">F</option> 
 
    <option value="g">G</option> 
 
    <option value="h">H</option> 
 
    <option value="i">I</option> 
 
    <option value="j">J</option> 
 
    <option value="k">K</option> 
 
    <option value="l">L</option> 
 
    <option value="m">M</option> 
 
    <option value="n">N</option> 
 
    <option value="o">O</option> 
 
    <option value="p">P</option> 
 
    <option value="q">Q</option> 
 
    <option value="r">R</option> 
 
    <option value="s">S</option> 
 
    <option value="t">T</option> 
 
    <option value="u">U</option> 
 
    <option value="v">V</option> 
 
    <option value="w">W</option> 
 
    <option value="x">X</option> 
 
    <option value="y">Y</option> 
 
</select>

あなたの関数の名前をJS異なる機能を考えられている：

確かに、あなたは、次の例では、これを見ることができます。

function add1(x) { var selection = x; console.log('add1: ' + x); } function add(x) { var selection = x; console.log('window.add: ' + x); }

<select class="seletion" onchange="add1(this.value);"> <option value="a">A</option> <option value="b">B</option> <option value="c">C</option> <option value="d">D</option> <option value="e">E</option> <option value="f">F</option> <option value="g">G</option> <option value="h">H</option> <option value="i">I</option> <option value="j">J</option> <option value="k">K</option> <option value="l">L</option> <option value="m">M</option> <option value="n">N</option> <option value="o">O</option> <option value="p">P</option> <option value="q">Q</option> <option value="r">R</option> <option value="s">S</option> <option value="t">T</option> <option value="u">U</option> <option value="v">V</option> <option value="w">W</option> <option value="x">X</option> <option value="y">Y</option> </select> <select class="seletion" onchange="window.add(this.value);"> <option value="a">A</option> <option value="b">B</option> <option value="c">C</option> <option value="d">D</option> <option value="e">E</option> <option value="f">F</option> <option value="g">G</option> <option value="h">H</option> <option value="i">I</option> <option value="j">J</option> <option value="k">K</option> <option value="l">L</option> <option value="m">M</option> <option value="n">N</option> <option value="o">O</option> <option value="p">P</option> <option value="q">Q</option> <option value="r">R</option> <option value="s">S</option> <option value="t">T</option> <option value="u">U</option> <option value="v">V</option> <option value="w">W</option> <option value="x">X</option> <option value="y">Y</option> </select>

出典

2016-12-30 17:30:21 gaetanoM

ありがとう、私はなぜ今コンソールに何も得ていないことを理解しています... !! – user2777173

はこれを試してください：あなたのコードでは、私にはよさそうだが、何とか名前を機能します追加が機能していない、機能の名前を変更したら、作業を開始します。作業のスニペットを参照してください

012ここで

function showSelection(x) { 
 
    alert(x); 
 
}

<select class="seletion" onchange="showSelection(this.value);"> 
 
        <option value="a">A</option> 
 
        <option value="b">B</option> 
 
        <option value="c">C</option> 
 
        <option value="d">D</option> 
 
        <option value="e">E</option> 
 
        <option value="f">F</option> 
 
        <option value="g">G</option> 
 
        <option value="h">H</option> 
 
        <option value="i">I</option> 
 
        <option value="j">J</option> 
 
        <option value="k">K</option> 
 
        <option value="l">L</option> 
 
        <option value="m">M</option> 
 
        <option value="n">N</option> 
 
        <option value="o">O</option> 
 
        <option value="p">P</option> 
 
        <option value="q">Q</option> 
 
        <option value="r">R</option> 
 
        <option value="s">S</option> 
 
        <option value="t">T</option> 
 
        <option value="u">U</option> 
 
        <option value="v">V</option> 
 
        <option value="w">W</option> 
 
        <option value="x">X</option> 
 
        <option value="y">Y</option> 
 
       </select>

出典

2016-12-30 17:26:53

'this'または' this.value'を渡すことは問題ではありません。問題は関数名の選択です。あなたの答えを提出する前にテストすることをお勧めします。 – NewToJS

@NewToJS、ええ、私はあなたに同意します。関数の名前が問題の原因です。私は私の答えを更新しました –

ありがとう...！私は今問題を理解しています – user2777173

1つのより信頼性の高いソリューションのインラインイベントハンドラを使用して

function addsel() { 
 
    var selection = document.getElementById("sel1").value; 
 
    console.log(selection); 
 
}

<select id="sel1" class="seletion" onchange="addsel()"> 
 
       <option value="a">A</option> 
 
       <option value="b">B</option> 
 
       <option value="c">C</option> 
 
       <option value="d">D</option> 
 
       <option value="e">E</option> 
 
       <option value="f">F</option> 
 
       <option value="g">G</option> 
 
       <option value="h">H</option> 
 
       <option value="i">I</option> 
 
       <option value="j">J</option> 
 
       <option value="k">K</option> 
 
       <option value="l">L</option> 
 
       <option value="m">M</option> 
 
       <option value="n">N</option> 
 
       <option value="o">O</option> 
 
       <option value="p">P</option> 
 
       <option value="q">Q</option> 
 
       <option value="r">R</option> 
 
       <option value="s">S</option> 
 
       <option value="t">T</option> 
 
       <option value="u">U</option> 
 
       <option value="v">V</option> 
 
       <option value="w">W</option> 
 
       <option value="x">X</option> 
 
       <option value="y">Y</option> 
 
      </select>

出典

2016-12-30 17:29:09 Banzay

なぜこれがより「信頼できる」理由であるのかを説明することをお勧めします。説明のないソースコードをダンプすることは誰にも役立たないでしょう。 – NewToJS

ありがとうございます... !! – user2777173

あなたが私のコードがうまくいかない理由を伝えることができればもっと助かります...ありがとうございました。 – user2777173

は、常に最高のアイデアではないです。このシナリオを処理するためにDOM APIを使用してみませんか？

はその後HTMLSelectElementからの読み取り、あなたのJSスクリプト

document.getElementsByClassName('seletion')[0].addEventListener('change', function(){  
    console.log(this.value); 
});

出典

2016-12-30 17:29:24 Ju66ernaut

しかし、これは既存のソースコードの問題を説明していません....それは.... – NewToJS

私は悪い習慣の使用を妨げようとしていて、彼らの問題の代替解決策を提供しています。 – Ju66ernaut

このような変更があるソリューションを提供する前に、既存のソースコードが機能していない/機能している理由を説明することをお勧めします。このような変更を行うときは、あなたの答え/解をより詳しく説明する必要があるかもしれません。 – NewToJS

<select>の値をonchange（this.value）で選択します

答えて

関連する問題