欧美一区二区三区,国内熟女精品熟女A片视频小说,日本av网,小鲜肉男男GAY做受XXX网站

如何使用循環從輸入或json輸入中獲取信息

CSS
錢諍諍1年前8瀏覽0評論

我寫了一個代碼，包含了你的信息:李森的名字-課程代碼 然后從iputs獲取你的個人信息，然后你點擊有id=certificate的buuton，給你一個證書。 它還有另一個輸入，以json格式獲取你的個人信息，在你點擊id=totextbtn的按鈕后，它也會給你一個證書。 您可以選擇以json格式添加您的個人信息，或者在inputs中鍵入。到現在為止我都沒有問題。 例如，如果我有10個人，我想添加他們的個人信息，并在單擊按鈕發布認證后保存。 但是我的代碼只為一個人簽發了證書。 這是我的代碼。

// Please see documentation at https://docs.microsoft.com/aspnet/core/client-side/bundling-and-minification
// for details on configuring this project to bundle and minify static web assets.

// Write your JavaScript code.



var firstname = document.getElementById("firstname")
var lastname = document.getElementById("lastname")

var jsonText = document.getElementById("jsontext")
var date = document.getElementById("date")
var personalcode = document.getElementById("personalcode")
var point = document.getElementById("point")
var jsonBtn = document.getElementById("jsonbtn")

function dropdown() {

    var form = document.getElementById("form");
    if (form.style.display === "none") {
        form.style.display = "block";
    } else {
        form.style.display = "none";
    }

}

jsonBtn.addEventListener("click", function() {

    var data = {
        "firstName": firstname.value,
        "lastName": lastname.value,
        "date": date.value,
        "personalcode": personalcode.value,
        "point": point.value,

    }




    // var names = []
    // names.push(data);
    // console.log(names)


    jsonText.innerHTML = JSON.stringify(data)

})

function degree() {
    var certificate = document.getElementById("certificate")
    var certification = document.getElementById("certification")
    var btname = document.getElementById("btname")
    var btcode = document.getElementById("btcode")
    var btlesson = document.getElementById("btlesson")
    var btpoint = document.getElementById("btpoint")
    var name = document.getElementById("name")
    var hour = document.getElementById("hour")

    var bthour = document.getElementById("bthour")
    var btdate = document.getElementById("btdate")
    btname.innerHTML = firstname.value + '\xa0' + lastname.value
    btcode.innerHTML = personalcode.value;
    btlesson.innerHTML = name.value;
    btpoint.innerHTML = point.value;
    bthour.innerHTML = hour.value,
        btdate.innerHTML = date.value


    certification.classList.add("show");



}

function sodor() {

    var txt = document.getElementById("jsoninput").value
    var totextbtn = document.getElementById("totextbtn")
    var certification = document.getElementById("certification")
    var btlesson = document.getElementById("btlesson")
    var name = document.getElementById("name")
    var hour = document.getElementById("hour")
    var bthour = document.getElementById("bthour")
    btlesson.innerHTML = name.value;
    bthour.innerHTML = hour.value
    var obj = JSON.parse(txt)




    document.getElementById("btname").innerHTML = obj.firstName + " " + obj.lastName;
    document.getElementById("btcode").innerHTML = obj.personalcode
    document.getElementById("btpoint").innerHTML = obj.point
    document.getElementById("btdate").innerHTML = obj.date

    certification.classList.add("show");
}

div.elem-group {
    margin: 20px 0;
}

div.elem-group.inlined {
    width: 49%;
    display: inline-block;
    float: left;
    margin-left: 1%;
}

input,
select,
textarea {
    border-radius: 2px;
    border: 2px solid #777;
    box-sizing: border-box;
    font-size: 1.25em;
    font-family: 'Nanum Gothic';
    width: 20%;
    padding: 10px;
}

div.elem-group.inlined input {
    width: 95%;
    display: inline-block;
}

textarea {
    height: 250px;
}

hr {
    border: 1px dotted #ccc;
}

.send {
    margin-left: 10px;
    margin-top: 10px;
    height: 50px;
    background: orange;
    border: none;
    color: white;
    font-size: 1.25em;
    font-family: 'Nanum Gothic';
    border-radius: 4px;
    cursor: pointer;
}

.send:hover {
    border: 2px solid black;
}

.addimg {
    position: relative;
    top: 13px;
    width: 40px;
    height: 40px;
}

.ladd {
    margin-left: 20px;
    width: 100px;
    height: 50px;
}

.name {
    margin-left: 10px;
    width: 300px;
    height: 50px;
}

.code {
    margin-left: 28px;
    width: 300px;
    height: 50px;
}

.hour {
    margin-left: 7px;
    width: 300px;
    height: 50px;
}

.form {
    display: none;
}

#jsontext {
    display: block;
}

.bt {
    width: 100px;
    height: 30px;
    background-color: white;
    border: 3px solid white;
}

.certification {
    position: relative;
    background-image: url(../img/certificate.png);
    background-repeat: no-repeat;
    background-size: cover;
    float: right;
    text-align: center;
    border: 3px solid blue;
    width: 600px;
    height: auto;
    min-height: 376px;
    display: none;
}

.show {
    display: block;
}

.sign {
    position: absolute;
    top: 286px;
    left: 121px;
    width: 116px;
    height: 66px;
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="/css/site.css">
  
   
</head>

<body>

    <div class="elem-group">
        <label for="lesson_name">name of course</label>
        <input class="name" type="text" id="name" name="lesson_name" placeholder="????? ????" pattern=[A-Z\sa-z]{3,20}>
    </div>
    <div class="elem-group">
        <label for="lesson_hour">course hour</label>
        <input class="hour" type="number" id="hour" name="lesson_hour" placeholder="???? ????" pattern=[A-Z\sa-z]{3,20}>
    </div>
   
    <div class="elem-group">
        <label for="lesson_code">lesson code</label>
        <input class="code" type="number" id="code" name="lesson_code" placeholder="123456789" pattern=(\d{3})-?\s?(\d{3})-?\s?(\d{4})>
    </div>
    <hr>

    <label class="ladd"> add student info        <img class="addimg" onclick="dropdown(this)" src="/img/plus.jpg" alt="">
        <form action="" method="post">
        <div  class="form" id="form">
            <label>name <label>
                <input id="firstname" type="text">
                <br>
                <label>family <label>
                <input id="lastname" type="text">
                <br> 
                <label>personal code<label>
                <input id="personalcode" type="text">
                <br>
                <label>point<label>
                <input id="point" type="number">
                <br>
                <label>date<label>
                <input id="date" type="date">
                <br>
          
    </form>
    </label>
   

       
         <button id="jsonbtn" class="send" >click here to print info in json format
           
            </button>
         <p  id="jsontext"></p>
   <input id="jsoninput" type="text">
    <hr>
<button id="certificate" onclick="degree(this)">issue certificate</button>
<button id="totextbtn" onclick="sodor(this)">if you put info in js click here to issuecertificate</button>
    </div>

    <br>
    <br>

<div class="certification" id="certification">
    <div>
        <br>
        <h1>certificate</h1>
    </div>
    <div>
        <h3>


            <button id="btcode" class="bt"></button> ms/mr

            <button id="btname"  class="bt"></button> personal code            <br>
            <br>
            <button id="btpoint"  class="bt"></button> pass corse
            <button id="btlesson"  class="bt"></button> with point
            <!-- <button class="bt"></button> ?? ????? -->

            <br>
         <br>

           <button id="btdate" class="bt"></button> after          <button id="bthour" class="bt" ></button> hour 
            <BR></BR>

            <br>
                        <img class="sign" src="/img/sign.png" alt="">


        </h3>

    </div>
</div>

<script src="/js/site.js"></script>
 <script src="/js/jquery-3.6.4.min.js"></script>  


</body>

</html>