javascript - 如何在javascript的只读输入字段中输出结果？
问题描述
被谷歌和一些文档卡住了，所以我想要输出 3 个值输入字段：
id="yourname"id="lockerid"id="secret"
在只读字段内id="randomidresult"。所以当我点击按钮生成时，输出字段将是这样的结果：
Name-1234-SomeRandomString
但仍然没有运气，这是代码：
function goBack() {
window.history.back();
}
function secret() {
var text = "";
var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
for (var i = 0; i < 5; i++) {
text += possible.charAt(Math.floor(Math.random() * possible.length));
}
return text;
}
function getValue() {
var randomidresult = document.getElementById("randomidresult");
var yourname = document.getElementById("yourname").value;
var lockerid = document.getElementById("lockerid").value;
var secretcode = secret();.value;
randomidresult.innerHTML = + yourname + "-" + lockerid + "-" secretcode;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body style="background-color:rgb(218,218,218);">
<nav class="navbar navbar-dark navbar-expand-md bg-dark">
<div class="container-fluid"><a class="navbar-brand" href="#">Random Student Generator</a>
</div>
</nav>
<section id="id-generator" style="padding:40px;">
<div class="container">
<div class="row">
<div class="col" id="title-generator">
<h1>Please create your Random ID Here</h1>
</div>
<div class="col-12" id="input-yourname">
<label>Input Your Name</label>
<input class="form-control-lg d-block" type="text" name="yourname" required="" id="yourname" style="width:75%;">
</div>
<div class="col-12" id="input-locker-id">
<label>Input Your Locker ID</label>
<input class="form-control-lg d-block" type="text" name="lockerid" required="" id="lockerid" style="width:75%;">
<input type="hidden" name="secret" id="secret">
</div>
<div class="col-12" id="generate" style="margin-top:20px;">
<button class="btn btn-primary" type="button" onclick="getValue()">Generate ID</button>
</div>
<div class="col-12" id="result-generator" style="margin-top:20px;">
<label>Your Random Student Identifier Result :</label>
<input class="form-control-lg d-block" type="text" name="result" id="randomidresult" style="width:75%;" readonly>
</div>
<div class="col-12" id="copy-id" style="margin-top:20px;">
<button class="btn btn-dark" type="button">Copy Generated ID</button>
</div>
<div class="col-12" id="go-back" style="margin-top:20px;">
<button class="btn btn-success" type="button" onclick="goBack()">Go Back To Previous Site</button>
</div>
</div>
</div>
</section>解决方案
一个input没有innerHTML；它有一个value. 您的代码中有一些拼写错误，包括：（var secretcode = secret();.value;应该是var secretcode = secret();因为返回值secret()已经是一个字符串并且您有一个额外的分号）和randomidresult.innerHTML = + yourname + "-" + lockerid + "-" secretcode;（应该是randomidresult.value = + yourname "-" + lockerid + "-" +secretcode;因为您有一个额外的符号并且在前面+缺少一个符号将其连接到字符串）。+secretcode
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body style="background-color:rgb(218,218,218);">
<nav class="navbar navbar-dark navbar-expand-md bg-dark">
<div class="container-fluid"><a class="navbar-brand" href="#">Random Student Generator</a>
</div>
</nav>
<section id="id-generator" style="padding:40px;">
<div class="container">
<div class="row">
<div class="col" id="title-generator">
<h1>Please create your Random ID Here</h1>
</div>
<div class="col-12" id="input-yourname">
<label>Input Your Name</label>
<input class="form-control-lg d-block" type="text" name="yourname" required="" id="yourname" style="width:75%;">
</div>
<div class="col-12" id="input-locker-id">
<label>Input Your Locker ID</label>
<input class="form-control-lg d-block" type="text" name="lockerid" required="" id="lockerid" style="width:75%;">
<input type="hidden" name="secret" id="secret">
</div>
<div class="col-12" id="generate" style="margin-top:20px;">
<button class="btn btn-primary" type="button" onclick="getValue()">Generate ID</button>
</div>
<div class="col-12" id="result-generator" style="margin-top:20px;">
<label>Your Random Student Identifier Result :</label>
<input class="form-control-lg d-block" type="text" name="result" id="randomidresult" style="width:75%;" readonly>
</div>
<div class="col-12" id="copy-id" style="margin-top:20px;">
<button class="btn btn-dark" type="button">Copy Generated ID</button>
</div>
<div class="col-12" id="go-back" style="margin-top:20px;">
<button class="btn btn-success" type="button" onclick="goBack()">Go Back To Previous Site</button>
</div>
</div>
</div>
</section>
<script>
function goBack() {
window.history.back();
}
function secret() {
var text = "";
var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
for (var i = 0; i < 5; i++) {
text += possible.charAt(Math.floor(Math.random() * possible.length));
}
return text;
}
function getValue() {
var randomidresult = document.getElementById("randomidresult");
var yourname = document.getElementById("yourname").value;
var lockerid = document.getElementById("lockerid").value;
var secretcode = secret();
randomidresult.value = yourname + "-" + lockerid + "-" + secretcode;
}
</script>To copy the generated ID, you can create a textarea with the value of the input with the generated ID to select and execute the copy command and remove thereafter.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body style="background-color:rgb(218,218,218);">
<nav class="navbar navbar-dark navbar-expand-md bg-dark">
<div class="container-fluid"><a class="navbar-brand" href="#">Random Student Generator</a>
</div>
</nav>
<section id="id-generator" style="padding:40px;">
<div class="container">
<div class="row">
<div class="col" id="title-generator">
<h1>Please create your Random ID Here</h1>
</div>
<div class="col-12" id="input-yourname">
<label>Input Your Name</label>
<input class="form-control-lg d-block" type="text" name="yourname" required="" id="yourname" style="width:75%;">
</div>
<div class="col-12" id="input-locker-id">
<label>Input Your Locker ID</label>
<input class="form-control-lg d-block" type="text" name="lockerid" required="" id="lockerid" style="width:75%;">
<input type="hidden" name="secret" id="secret">
</div>
<div class="col-12" id="generate" style="margin-top:20px;">
<button class="btn btn-primary" type="button" onclick="getValue()">Generate ID</button>
</div>
<div class="col-12" id="result-generator" style="margin-top:20px;">
<label>Your Random Student Identifier Result :</label>
<input class="form-control-lg d-block" type="text" name="result" id="randomidresult" style="width:75%;" readonly>
</div>
<div class="col-12" id="copy-id" style="margin-top:20px;">
<button class="btn btn-dark" type="button" onClick="copy(document.getElementById('randomidresult').value)">Copy Generated ID</button>
</div>
<div class="col-12" id="go-back" style="margin-top:20px;">
<button class="btn btn-success" type="button" onclick="goBack()">Go Back To Previous Site</button>
</div>
</div>
</div>
</section>
<script>
function goBack() {
window.history.back();
}
function secret() {
var text = "";
var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
for (var i = 0; i < 5; i++) {
text += possible.charAt(Math.floor(Math.random() * possible.length));
}
return text;
}
function getValue() {
var randomidresult = document.getElementById("randomidresult");
var yourname = document.getElementById("yourname").value;
var lockerid = document.getElementById("lockerid").value;
var secretcode = secret();
randomidresult.value = yourname + "-" + lockerid + "-" + secretcode;
}
function copy(val){
var textArea = document.createElement("textarea");
textArea.value = val;
document.body.appendChild(textArea);
textArea.select();
document.execCommand("Copy");
textArea.remove();
}
</script>推荐阅读
- ios - 崩溃 ERROR_CGDataProvider_BufferIsNotReadable + 16 仅适用于 iOS >= 11.3
- javascript - 在 Chrome 控制台中没有任何线索的功能失调的 jQuery 函数
- jmeter - 在 JMeter 中提取响应的主体并在其他请求中使用
- javascript - 如何仅在移动设备中运行脚本
- c# - 聚合来自两个集合的数据
- php - 在 codeigniter 中为 foreach() 提供的参数无效
- arrays - JQ：计算字符串出现的次数
- c++ - 在基类和派生类中重载运算符
- scala - 如何在播放中进行文件上传（Scala）
- jquery - 在 Express/node/jQuery 中从 POST 中提取表单值时遇到问题