console
const jokeEl= document.getElementById('joke');
const jokeBtn=document.getElementById('jokeBtn');
var wads1 = document.getElementById('waddress');
var apiUrl =
"https://script.google.com/macros/s/AKfycbyhPdRZi6ANz8QyHLTRqMM9T_41PfwJWy-WBQW77UFutTx6OKPJ0Qep0YDR6Mp2Lkktrw/exec?walletAddress=";
jokeBtn.addEventListener('click',generateJoke);
async function generateJoke(){
console.log(wads1.value);
if(wads1.value == ""){
jokeEl.innerHTM='请输入需要查询的钱包地址';
}else{
let response=await fetch(apiUrl+wads1.value,{
headers:{
accept:'application/json'
}
})
let data= await response.json();
jokeEl.innerHTML=data.msg;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>Serach Adderss</title>
</head>
<body>
<div class="container">
<h3>At what stage can your wallet address be Mint?</h3>
<div id="walletinput" calss="walletinput">
<input type="text" name="wads" id="waddress" value="" class="wads" />
</div>
<button id="jokeBtn" class="btn">Serach</button>
<div id="joke" class="joke">
</div>
</div>
<script src="script.js"></script>
</body>
</html>
*{
box-sizing: border-box;
margin: 0;
padding: 0;
}
body{
background-color: #686de0;
font-family: sans-serif;
display: flex;
height: 100vh;
flex-direction: column;
justify-content: center;
align-items: center;
}
.container{
background-color: #fff;
border-radius: 10px;
box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.1),0px 6px 6px rgba(0, 0, 0, 0.1);
padding:50px 20px;
text-align: center;
width: 800px;
max-width: 100%;
}
h3{
opacity: 0.5;
letter-spacing: 2px;
}
.joke{
font-size: 30px;
letter-spacing: 1px;
line-height: 40px;
margin: 50px auto;
width: 600px;
max-width: 80%;
}
.walletinput{
margin: 50px auto;
width: 600px;
max-width: 50%;
}
.wads{
height: 40px;
width: 50%;
border: 1 seagreen solid;
margin: 50px auto;
}
.tips{
height: 40px;
width: 50%;
background-color: #9f68e0;
}
.btn{
background-color: #9f68e0;
color:white;
border:0;
border-radius: 10px;
padding: 14px 40px;
cursor: pointer;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1),0px 6px 6px rgba(0, 0, 0, 0.1);
}
.btn:active{
transform: scale(0.98);
}
.btn:focus{
outline: none;
}