Javascript 将文本生成到文本框中？

Question

我写了一小段代码，但我不确定为什么它不起作用？它应该接受人的名字，并根据他们选择的内容输出一个网站，其名字结尾。

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 属性。这些也应该都是值。

另一个问题是您将监听器放置在监听器中。您的外部函数 generateDynamicSignature 监听按钮的 onclick 事件。该函数仅在单击按钮后运行。但在这个函数中，您附加了一个新的监听器。仅当有人单击按钮两次时，此内部监听器才会运行。

我已将这些更改包含在新的 fiddle 中:

https://jsfiddle.net/zdfnk77u/