如何将JavaScript函数结果赋值给HTML文本输入框并刷新更新

要实现刷新页面时自动将随机字符串填充到目标input框，只需在页面加载时完成以下两步操作：

1. 调用你已有的maketeststring函数生成指定长度的随机字符串
2. 通过ID获取input元素，将生成的字符串赋值给它的value属性

以下是完整的可运行代码示例：

完整代码示例 #

HTML 代码 #

<input class="test_string" type="text" id="teststring" readonly>

JavaScript 代码 #

function maketeststring(length) {
    let result = '';
    const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
    const charactersLength = characters.length;
    let counter = 0;
    while (counter < length) {
      result += characters.charAt(Math.floor(Math.random() * charactersLength));
      counter += 1;
    }
    return result;
}

// 页面加载时填充input
const inputElement = document.getElementById('teststring');
inputElement.value = maketeststring(16);

补充说明 #

• 由于input设置了readonly属性，用户无法手动修改输入框内容，完全符合需求
• 若将JavaScript代码放在HTML的<head>标签内，需要包裹在DOMContentLoaded事件中，确保DOM元素加载完成后再执行：

document.addEventListener('DOMContentLoaded', function() {
    const inputElement = document.getElementById('teststring');
    inputElement.value = maketeststring(16);
});

内容的提问来源于stack exchange，提问作者jordimetil