Question

Google和一些文档陷入困境，所以我要输出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>

Answer 1

input没有innerHTML；它有一个value。您的代码中有一些错字，包括：var secretcode = secret();.value;（由于var secretcode = secret();的返回值已经是一个字符串，并且您有一个多余的分号，因此应该为secret()）和{{1 }}（它应该是randomidresult.innerHTML = + yourname + "-" + lockerid + "-" secretcode;，因为您有一个额外的randomidresult.value = + yourname "-" + lockerid + "-" +secretcode;符号，并且在+前面缺少了一个+符号以将其连接到字符串）。

secretcode

要复制生成的ID，您可以使用生成的ID创建具有<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>值的textarea，以选择并执行复制命令，然后将其删除。

input

Answer 2

代码中的某些拼写错误会导致语法错误。

此外，您需要使用randomidresult.value而不是randomidresult.innerHTML

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

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Random Student Identifier</title>
    <link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="assets/css/Footer-Dark.css">
    <link rel="stylesheet" href="assets/css/styles.css">

    <script src="assets/js/jquery.min.js"></script>
    <script src="assets/bootstrap/js/bootstrap.min.js"></script>

</head>
<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>
</body>
</html>

如何在javascript中的readonly输入字段内输出结果？

2 个答案: