Javascript 将函数应用于文档写入并在文本区域显示_Javascript_Html

Javascript 将函数应用于文档写入并在文本区域显示

javascript html

Javascript 将函数应用于文档写入并在文本区域显示,javascript,html,Javascript,Html,我希望能够应用该函数，使用javascript在文本区域中显示结果。我有以下代码，到目前为止，它使用document.write在主体上编写函数，但我想使用onclick按钮在文本区域上显示它，我如何实现这一点 <html> <title></title> <head> <script> function randomAlphanumeric() { var str = '',

我希望能够应用该函数，使用javascript在文本区域中显示结果。我有以下代码，到目前为止，它使用document.write在主体上编写函数，但我想使用onclick按钮在文本区域上显示它，我如何实现这一点

<html>
<title></title>
<head>

    <script>
    function randomAlphanumeric() {
        var str = '',
                possible = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789',
                numberOfLetters = 10;

        for (var i = 0; i < numberOfLetters; i++) {
            str += possible.charAt(Math.floor(Math.random() * possible.length));
        }

        return str;
    }

    document.write(randomAlphanumeric());
    </script>

    <style>
    body {
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
    }
    </style>
</head>

<body>

<button id="btn" onclick="randomAlphanumeric();"> test </button>

<textarea id="results" rows="10" cols="20"> </textarea>



</body>

</html>

您只需将结果添加到textarea的innerHTML：

字母数字函数{ var str=，可能='ABCDEFGHIJKLMNOPQRSTUVXYZABDEFGHIJKLMNOPQRSTUVXYZ0123456789'，字母数=10；对于变量i=0；i有两个问题

通过使用document.write，您将字符串添加到文档正文而不是文本区域。使用document.getElementById results.value=str将textarea值设置为字符串

您正在函数外写入字符串，这意味着无论您是否单击按钮，都将始终显示该字符串。将document.getElementById results.value=str行移到函数的末尾。如果这样做，就不需要returnstr语句

document.write将函数的返回值写入整个文档，覆盖任何其他元素并删除textarea

您可以使用document.querySelector'textarea'或document.getElementById'results'专门针对您的textarea，将其存储在变量中，然后使用您的varname.value=randomAlphanumeric将textarea的值更改为所需的文本

这里有一个JSFIDLE:

您需要在单击按钮时将结果添加到文本区域的innerHTML中，请参见下面的代码笔

document.write方法覆盖页面的内容。为了完成任务，您需要在buttonbtn中添加一个click事件监听器，该监听器执行Randomalphameric函数，不再返回任何内容，只需将生成的字符串放入textarearesults元素中

下面是一个演示片段：

使用内联事件侦听器不是明智的选择，最好使用该方法

//引用“按钮”和“文本区域”，以便我们以后可以使用它们。 var btn=document.getElementById'btn'， textarea=document.getElementById'results'； //将“单击”事件侦听器附加到“按钮”。 btn.addEventListener'click'，随机字母数字；字母数字函数{ var str=，可能='ABCDEFGHIJKLMNOPQRSTUVXYZABDEFGHIJKLMNOPQRSTUVXYZ0123456789'，字母数=10； forvar i=0；i精彩的这正是我需要的，谢谢视差！

<script>
function randomAlphanumeric() {
    var str = '',
    possible = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789',
    numberOfLetters = 10;

    for (var i = 0; i < numberOfLetters; i++) {
        str += possible.charAt(Math.floor(Math.random() * possible.length));
    }
    document.getElementById( "results" ).value = str
}
</script>

    function randomAlphanumeric() {
    var str = '',
            possible = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789',
            numberOfLetters = 10;

    for (var i = 0; i < numberOfLetters; i++) {
        str += possible.charAt(Math.floor(Math.random() * possible.length));
    }

    return str;
}

document.write(randomAlphanumeric());

document.getElementById('btn').onclick = function(e){
  document.getElementById('results').innerText = randomAlphanumeric();
}