Javascript 使用.html（）清除前一个不起作用的随机字符串

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

这部分按预期工作。但是，我使用的是

$（'output'）.html（“”）

覆盖最后一个随机字符串。我以前曾在其他函数中使用过它，它的工作方式与预期的一样，但这里没有。我试着在函数中移动它，看看它是否与函数的顺序有关，但它没有删除前面的随机字符串

我做错了什么

HTML:

点击我

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

var text=”“；
var-mable=“abcdefghijklmnopqrstuvxyz”；
$（文档）.ready（函数（）{
$（“#按钮”）。在（'click'，函数（）{
var值=（$（'#input'）.val（）；
对于（i=0；i

您还需要重置变量

文本

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


或者将
text
变量从父范围移动到
onlick
handler

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


你也不需要

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

因为你设置了内容

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

试一试
$（'#output'）.empty（）

From:
问题不在于
.html（）
部分。问题是您的var
文本
永远不会重置

供参考-

最新答案如下

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

它下面的行设置元素的内容

供参考-

就文件而言—

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("");