不起作用"/>
使用 Fetch API 更改 HTML 后 JavaScript 不起作用
我的“interact.html”只有登录表单和两个按钮，分别称为“登录”和“注册”，如果用户想创建一个新帐户，他们需要点击“注册”按钮，然后登录表单将使用 Fetch API 更改为 Register 表单。如果用户想再次将Register表单更改为Login表单，他们可以点击“Login”按钮，然后使用Fetch API将Login表单更改为Register表单。
我写了一个文件“accounts.js”来处理“interact.html”上的事件
首先获取元素：
获取“登录表单”
const form = document.getElementById('login-form');
获取登录按钮
const log = document.getElementsByClassName('log-reg')[0];
获取注册按钮
const reg = document.getElementsByClassName('log-reg')[2];
这里是Fetch API的部分
将注册表格更改为登录表格
log.addEventListener('click', function(event){
fetch('http://127.0.0.1:8090/interact?page=login')
.then(response => response.text())
.then(body =>
form.innerHTML=body
)
});
将登录表格更改为注册表格
reg.addEventListener('click', function(event){
fetch('http://127.0.0.1:8090/interact?page=register')
.then(response => response.text())
.then(body =>
form.innerHTML=body
)
});
然后 Node.js(express) 将返回 html
app.get('/interact',(req,res) => {
if(req.query.page==='register'){
res.sendFile(path.join(__dirname+'/public/register-form.html'));
}
else if (req.query.page==='login'){
res.sendFile(path.join(__dirname+'/public/login-form.html'));
}
else{
res.sendFile(path.join(__dirname+'/public/interact.html'));
}
})
这是“register-form.html”
<body>
<div class="mb-3">
<label for="setusername" class="form-label" style="font-size: 20px;">Set User name:</label>
<br>
<input class="form-control">
</div>
<br>
<div class="mb-3">
<label for="setpassword" class="form-label" style="font-size: 20px;">Set Password:</label>
<br>
<input type="password" class="form-control" id="setpassword">
</div>
<div class="mb-3">
<label for="ensure" class="form-label" style="font-size: 20px;">Ensure Password:</label>
<br>
<input type="password" class="form-control" id="ensure">
</div>
<br>
<button type="submit" class="btn btn-primary" id = "create">Register</button>
</body>
“login-form.html”类似于“register-form.html”
更改登录表单或注册表单后，获取不到“login-form.html”和“register-form.html”中被fetch() API更新为“interact.html”的元素
无法获取元素“创建”
const create = document.getElementById('create');
因为我写的时候
create.addEventListener('click',function(event){})
浏览器会报
Uncaught TypeError: Cannot read properties of null (reading 'addEventListener')我想知道如何解决这个问题或任何其他方法来实现相同的方法。
回答如下：更多推荐
使用 Fetch API 更改 HTML 后 JavaScript 不起作用
发布评论