JSFiddle - React, Tailwind, and code Playground
HTML
<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
<meta charset="UTF-8">
<script src="script.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>سامانه دریافت رمز اینترنت</title>
<style>
.display-form{
margin: 75px auto;
width: 500px;
height: 500px;
box-shadow: 0 10px 30px rgba(28, 76, 156, .15);
}
.displayOrg{
padding-top: 20%;
}
input{
text-align: center;
margin: 0px auto;
display: block;
width: 200px;
height: 35px;
border: none;
background-color: #F2F2F2;
border: 5px;
font-size: .85rem;
}
button{
text-align: center;
margin: 0px auto;
display: block;
width: 200px;
height: 45px;
background-color: #2979ff;
border:1px solid #0b6ab6;
color: #fff;
border-radius: 3px;
font-size: .99rem;
cursor: pointer;
}
button:hover{
background-color: #005cf5;
-webkit-transition: all ease-in-out .4s;
}
.inputClick{
display: none;
}
#form{
display: block;
}
</style>
</head>
<body>
<div class="display">
<div class="display-form">
<div class="displayOrg">
<form id="form">
<input type="text" placeholder="شماره دانشجویی" class="input1">
<br>
<input type="text" placeholder="شماره شناسنامه یا ملی" class="input2">
<br>
<button class="buttonForm" onclick="recive()">دریافت</button>
<input type="text" class="inputClick">
</form>
</div>
...
JavaScript
let input1=document.getElementsByClassName('input1').value;
let input2=document.getElementsByClassName('input2').value;
let recive=function(){
let totalValue=input1+input2;
return totalValue
}