Javascript Text in Textbox generieren?

Question

Ich habe dieses kleine Stück Code geschrieben, aber ich bin mir nicht sicher, warum es nicht funktioniert? Es soll den Namen der Person aufnehmen und je nachdem, was sie ausgewählt hat, wird eine Website mit ihrem Namen am Ende der Website ausgegeben.

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

Es gibt ein paar Probleme mit Ihrem Code, ich werde versuchen, sie alle aufzulisten.

Zuerst haben Sie die Eingabe des Benutzernamens nie zu Ihrem HTML hinzugefügt.

Als nächstes scheinen Sie auf dem Weg zum Zugriff auf/setzen Sie den Text einer HTML-Eingabe durcheinander. Sie tun dies über das Feld value. Für den Benutzernamen eingegeben wird, vergessen Sie jede Eigenschaft zuzugreifen, so dass Sie es ändern müssen:

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

Sie verwendet später die text Eigenschaft sowohl das Auswahlelement und dem Ausgang. Diese sollten auch beide value sein.

Ein weiteres Problem ist, dass Sie einen Listener in einem Listener platziert haben. Ihre äußere Funktion, generateDynamicSignature, wartet auf das Onclick-Ereignis der Schaltfläche. Diese Funktion wird nur ausgeführt, nachdem auf die Schaltfläche geklickt wurde. In dieser Funktion fügen Sie jedoch einen neuen Listener hinzu. Dieser innere Listener wird nur ausgeführt, wenn jemand zweimal auf die Schaltfläche klickt.

Ich habe diese Änderungen in einer neuen Geige enthalten:

https://jsfiddle.net/zdfnk77u/

Answer 2

• wo usernameInput in Ihrem ht ml?
• in der, wenn die Verwendung === statt ==

Answer 3

Falls und wenn Sie die fehlenden "usernameInput" Element in Ihrem HTML hinzufügen, alles, was Sie tun müssen, ist ...

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

Answer 4

Ich denke, ein Teil des Problems ist, dass Sie auf die value und nicht die text von input elements zugreifen möchten. Also für text und strUser, möchten Sie text.value statt text.text und so tun.

Basierend auf der JSfiddle, möchten Sie wahrscheinlich auch neu schreiben, wie Sie den Dokument-Listener und den Onclick des HTML-Elements verwenden. Jedes Mal, wenn die Schaltfläche angeklickt wird, geht es durch die und erstellt einen Listener, um den Wert zu ändern, aber nicht unbedingt den Wert selbst ändern. Wenn Sie die Logik der generate-Funktion innerhalb des Click-Listeners verschieben, sollte das die meisten Ihrer Probleme beheben.

Answer 5

Sie erstellen Ihre generateDynamicSignature in $ (document) .ready. Es gibt zwei Ansätze.

• definieren function generateDynamicSignature außerhalb $(document).ready

oder

• binden Ihre button.click an einen Handler innerhalb $(document).ready

nicht diese beiden mischen.