Javascriptテキストボックスにテキストを生成するには？

Question

私はこの小さなコードを書いたが、なぜそれが機能していないのか分からない。それは人の名前を取ることになっていると彼らはそれの末尾に自分の名前でWebサイトを出力する彼らが選択したものに応じて。あなたのHTにusernameInputさ

JSFiddle http://jsfiddle.net/tQyvp/135/

はJavaScript

function generateDynamicSignature() { 
    var dynSig = ""; 
    var user = document.getElementById("usernameInput"); 
    var e = document.getElementById("scriptListInput"); 
    var strUser = e.options[e.selectedIndex].text; 
    if (strUser == "example") { 
     dynSig = "http://example.com/users/"; 
    } 
    document.getElementById("generateSignature").addEventListener('click', function() { 
     var text = document.getElementById('dynamicSignatureOutput'); 
     text.text = (dynSig + user); 
    }); 
} 

HTML

<select class="form-control" id="scriptListInput"> 
        <option value="example">Example 1</option> 
       </select> 

Answer 1

コードにはいくつか問題がありますが、それらをすべてリストしてみます。

まず、HTMLにユーザー名の入力を追加したことはありません。

次に、HTML入力のテキストにアクセス/設定する方法が混乱しているようです。これはvalueフィールドで行います。ユーザ名入力の場合は、あなたが任意のプロパティにアクセスするのを忘れて、あなたはそれを変更する必要があります：

var user = document.getElementById("usernameInput").value; 

後でselect要素と出力の両方のtextプロパティを使用していました。これらはともにvalueでなければなりません。

もう1つの問題は、リスナーをリスナー内に配置したことです。外部関数generateDynamicSignatureは、ボタンのonclickイベントを待ち受けます。この関数は、ボタンがクリックされた後にのみ実行されます。しかし、この関数の中では、新しいリスナーをアタッチします。この内部リスナーは、誰かがボタンを2回クリックした場合にのみ実行されます。

は、私は新しいバイオリンでこれらの変更を含めました：

https://jsfiddle.net/zdfnk77u/

Answer 2

• ml？ ===使用し、もし代わりに==

Answer 3

もし、あなたが行う必要があるでしょう、すべては、あなたのHTMLに欠けている「usernameInput」要素を追加で

...

dynSig='http://example.com/users/'+usernameInput.value; 

Answer 4

valueにアクセスし、textのinput elementsにアクセスしないことが問題の一部だと思います。だからtextとstrUserの場合は、text.textの代わりにtext.valueとする必要があります。

また、JSfiddleに基づいて、ドキュメントリスナーとhtml要素のonclickの使い方を書き直したいと思うかもしれません。ボタンをクリックするたびに、ボタンはgenerateDynamicSignatureを通過し、リスナーを作成して値を変更しますが、値自体は必ずしも変更されません。クリックリスナー内でgenerate関数のロジックを移動すると、ほとんどの問題が解決されます。

Answer 5

あなたは$（ドキュメント）.readyの内側にあなたのgenerateDynamicSignatureを作成します。 2つのアプローチがあります。

• は、これら二つを混ぜて使用しないでください$(document).ready

内のハンドラにごbutton.clickバインドし外 $(document).ready

または

• function generateDynamicSignatureを定義します。