Javascript在文本框中生成文本?

时间:2016-04-23 23:23:28

标签: javascript html

我写了这么一点代码,但我不确定为什么它不起作用?它应该接受人名,并根据他们选择的内容输出一个名称最终的网站。

的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>

5 个答案:

答案 0 :(得分:1)

您的代码存在一些问题,我会尝试将它们全部列出。

首先,您从未在HTML中添加用户名输入。

接下来,在访问/设置HTML输入文本的过程中,您似乎感到困惑。您可以通过value字段执行此操作。对于用户名输入,您忘记访问任何属性,因此您需要将其更改为:

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

您稍后使用了select元素和输出的text属性。这些也应该是value

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

我将这些变化包含在一个新的小提琴中:

https://jsfiddle.net/zdfnk77u/

答案 1 :(得分:0)

  • 你的html中的usernameInput在哪里?
  • 在if中,使用===而不是==

答案 2 :(得分:0)

如果您在HTML中添加缺少的“usernameInput”元素,那么您只需要...

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

答案 3 :(得分:0)

我认为部分问题是您要访问value,而不是text input elements。因此,对于textstrUser,您希望text.value代替text.text等。

此外,基于JSfiddle,您可能想要重写您使用文档侦听器的方式以及html元素的onclick。每次单击按钮时,它都会通过generateDynamicSignature并创建一个监听器来更改值,但不一定会更改值本身。如果在click侦听器中移动generate函数的逻辑,那么应解决大部分问题。

答案 4 :(得分:0)

您在$(document).ready中创建了generateDynamicSignature。 有两种方法。

  • 在外面定义 double array[5]; for (i=0; i<5; i++) { array[i] = val1 array[i] = val2 array[i] = val3 array[i] = val4 } function generateDynamicSignature

  • 将您的button.click绑定到$(document).ready
  • 中的处理程序

不要混用这两个。