javascript - 使用.html()清除以前的随机字符串不起作用

我正在写一个简短的函数，它将一个长度相等的随机字符串附加到给定的单词上。例如，如果输入单词“hello”，它将返回一个长度为5个字母的随机字符串。

这部分工作正常。但是，我正在使用$('output').html("");覆盖最后一个随机字符串。我以前曾将此用于其他功能，但它已按预期工作，但此处没有。我尝试过在函数中移动它，以查看它是否与函数的顺序有关，但它并未删除先前的随机字符串。

我究竟做错了什么？

Fiddle here

HTML:

<input type="text" id="input">
<button id="button">Click Me</button>
<div id="output"></div>

JavaScript:

var text = "";
var possible = "abcdefghijklmnopqrstuvwxyz";
$(document).ready(function () {
    $('#button').on('click', function () {

        var value = ($('#input').val());
        for (i = 0; i < value.length; i++) {
            text += possible.charAt(Math.floor(Math.random() * possible.length));
        };
        $('#input').val("");
        $('#output').html("");
        $('#output').html(text);
    });
});

最佳答案

问题不在于.html()部分。问题是您的var text永远不会重置。

供引用-http://jsfiddle.net/oo5eLbpu/2/

更新后的答案如下

var possible = "abcdefghijklmnopqrstuvwxyz";
$(document).ready(function() {
    $('#button').on('click', function() {
        var text = ""; // moved the variable inside the click handler
        var value = ($('#input').val());
        for (i = 0; i < value.length; i++) {
            text += possible.charAt(Math.floor(Math.random() *
                possible.length));
        };
        $('#input').val("");
        $('#output').html("");
        $('#output').html(text);
    });
});

此外，您可以从代码中删除以下行

$('#output').html("");

由于它下面的线设置了元素的内容。

供引用-http://jsfiddle.net/oo5eLbpu/4/

对于文档-http://api.jquery.com/html/