Question

我希望能够使用该功能使用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>

Answer 1

有两个问题。

通过使用document.write，您可以将字符串添加到文档正文而不是文本区域中。请使用document.getElementById( "results" ).value = str来将textarea值设置为字符串。
您正在函数外编写字符串，这意味着无论您是否单击按钮，该字符串将始终显示。将document.getElementById( "results" ).value = str行在函数内部移到最后。如果这样做，则不需要return 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));
    }
    document.getElementById( "results" ).value = str
}
</script>

Answer 2

document.write()会将函数的返回值写入整个文档，覆盖其他所有元素并删除文本区域。

您可以使用document.querySelector('textarea')或document.getElementById('results')来专门针对文本区域，将其存储在变量中，然后使用yourVarName.value = randomAlphanumeric()将文本区域的值更改为所需的文本。 / p>

这是一个jsfiddle：http://jsfiddle.net/wntitus/52e3pf79/

Answer 3

您需要在单击按钮时将结果添加到textarea的innerHTML中，请参见以下代码笔

https://codepen.io/parallaxisjones-the-typescripter/pen/MqNYxM?editors=1111

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

Answer 4

document.write()方法将覆盖页面的内容。为了完成任务，您需要向button#btn添加 click 事件监听器，该事件监听器执行randomAlphanumeric函数，该函数将不再返回任何内容，它将只是将生成的字符串放在textarea#results元素中。

这是一个演示代码段：

使用内联事件监听器不是一个明智的选择，最好使用addEventListener方法。

// referencing the 'button' and the 'textarea' so we can use them later.
var btn = document.getElementById('btn'),
  textarea = document.getElementById('results');

// attaching a 'click' event listener to the 'button'. 
btn.addEventListener('click', randomAlphanumeric);

function randomAlphanumeric() {
  var str = '',
possible = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789',
numberOfLetters = 10;
  for(var i = 0; i < numberOfLetters; i++) {
str += possible.charAt(Math.floor(Math.random() * possible.length));
  }
  // place the generated string into the 'textarea'.
  results.value = str;
}

#btn, #results {
  display: block;
  width: 85%;
  margin: 5px auto;
}

<button id="btn">Generate a random string</button>
<textarea placeholder="click the button to generate a string..." id="results"></textarea>

希望我进一步推动了你。

Answer 5

您可以将结果添加到textarea的innerHTML中：

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").innerHTML = str;
  // return str;
}

<html>
<title></title>

<head>


  <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>

在Document Write上应用功能并在textarea上显示

5 个答案: