HTML中如何给函数输出添加文本，实现(x,y)格式的随机数展示

无法仅通过给元素添加原生HTML属性实现该需求，HTML原生input没有内置随机数生成、多值拼接格式化的相关属性，该效果需要调整JavaScript逻辑实现，修改方案如下：

完整实现代码 #

<input id="result" type="text" readonly>

<script>
function diceroll(){
  // 生成两个1-6范围的随机整数
  const firstNum = Math.floor(Math.random() * 6 + 1);
  const secondNum = Math.floor(Math.random() * 6 + 1);
  // 按(x,y)格式拼接后赋值给输入框
  document.getElementById("result").value = `(${firstNum},${secondNum})`;
}

// 可选：页面加载完成后自动生成一次结果
// diceroll();
</script>

<!-- 可选：添加手动触发生成的按钮 -->
<button onclick="diceroll()">生成随机数对</button>

补充说明 #

• 代码里给input添加的readonly是可选属性，作用是禁止用户手动修改输入框内容，仅保留展示、复制能力，不需要可以删掉
• 如果需要调整随机数的生成范围，修改Math.random() * 6里的数字即可，比如要生成1-10的数就改成Math.random() * 10

内容的提问来源于stack exchange，提问作者Emily F.