我创建了一个表单，要求用户输入姓名和电话号码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Personal Info</title>
<meta name="viewport" content="width=device-width">
<style>
*,
*::after,
*:before{
padding: 0;
margin: 0;
box-sizing: border-box;
}
html{
font:normal 20px/1.5 sans-serif;
}
h1{
margin: 1rem 2rem;
}
form{
margin: 2rem;
width: 800px;
}
.form-box{
padding: 1rem;
clear: both;
width: 100%;
position: relative;
}
.form-box label{
font-size: 1rem;
float: left;
width: 100px;
margin-right: 20px;
}
.form-box input{
font-size: 1rem;
width: 300px;
padding: 0.25rem 1rem;
}
.form-box select{
font-size: 1rem;
width: 300px;
padding: 0.25rem 1rem;
}
.form-box option{
font-size: 1rem;
width: 300px;
padding: 0.25rem 1rem;
}
.form-box input[type="checkbox"]{
font-size: 1rem;
}
.form-box button{
font-size: 1rem;
border: none;
padding: 0.25rem 2rem;
margin-right: 1rem;
color: white;
background-color: cornflowerblue;
cursor: pointer;
}
.error::after{
background-color: hsl(10, 60%, 50%);
color: papayawhip;
font-size: 1rem;
line-height: 1.8;
width: 350px;
padding-left: 1rem;
position:absolute;
right: 0;
content: attr(data-errormsg);
}
</style>
</head>
<body>
<div align="center">
<form action="results.html" method="GET">
<div>
<label for="name">Name :</label>
<input type="text" name="name" id="name" autofocus required tabindex="1"/>
</div>
<div>
<label for="phonenumber">Phone No. :</label>
<input type="number" name="phonenumber" id="phonenumber" required tabindex="2"/>
</div>
<div>
<button type="reset">Reset</button>
<button type="submit">Submit</button>
</div>
</form>
</div>
并输出以下URL
file:///c:/users/w10us/desktop/website/results.html？name=john&phoneNumber=0123456789
如何提取姓名和电话号码值，并将它们连接到生成QR码的图像URL中
我想要的输出是:
<img src='https://chart.googleapis.com/chart?cht=qr&chs=150x150&chl={name}_{phonenumber}' height=250 width=250/>
我想我找到了解决你问题的办法。 在results.html上，将以下javascript放在或链接到results.html的单独.js文件中:此代码在加载文档时运行，然后从URL检索值。
window.onload = function() {
//use the line below this one to get a dynamic result. This is for demonstration purposes only.
let url = new URL('file:///C:/Users/w10us/Desktop/Website/results.html?name=john&phonenumber=0123456789');
//let url = new URL(window.location.href);
let name = url.searchParams.get("name");
let phoneNumber = url.searchParams.get("phonenumber");
//create the qr code url
let qrCodeUrl = "https://chart.googleapis.com/chart?cht=qr&chs=150x150&chl=" + name + "_" + phoneNumber;
//set the qr code url as the source of the image tag
document.getElementById('qrCodeImg').src = qrCodeUrl;
}<img id='qrCodeImg' src='https://chart.googleapis.com/chart?cht=qr&chs=150x150&chl={name}_{phonenumber}' height=250 width=250/>