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

Question

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

这部分工作符合预期。但是，我使用$('output').html("");来覆盖最后一个随机字符串。我以前在其他功能中使用过这个，它也像预期的那样工作，但这里没有。我试着在函数中移动它，看看它是否与函数的顺序有关，但它并没有删除以前的随机字符串。

我做错了什么？

在这里摆弄

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);
    });
});

Answer 1

问题不在.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/

Answer 2

您还需要重置变量text，

$('#button').on('click', function() {
   text = '';
   // your code 
});

Example

或将text变量从父作用域移动到onlick处理程序

$('#button').on('click', function() {
   var text = '';
   // your code 
});

Example

此外，您不需要

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

因为您设置了内容

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

Answer 3

尝试$('#output').empty();

发件人：https://api.jquery.com/empty/