我想创建一个按钮，显示弹出窗口，向用户显示OTP代码已发送到他们的手机，并能够将其链接到另一个"验证OTP码"；页面，让用户输入发送到其手机的验证码。如何创建一个在单击时调用两个函数的按钮？我尝试了下面的代码，但它根本不起作用。有人能给我一个答案，告诉我如何创建一个在点击时调用两个操作的按钮吗？
这是我在HTML代码中的按钮：
<div class="col-md-12">
<div class="form-group">
<input type="text" id="number" name="phone" class="form-control" placeholder="Phone Number" required>
<br>
<div id="recaptcha-container"></div>
<button id="verify"class="block"type="button" onclick="one(); phoneAuth();">
Send Verification Code
</button>
</div>
</div>
这是我的JavaScript代码：
window.onload = function () {
render();
};
function render() {
window.recaptchaVerifier = new firebase.auth.RecaptchaVerifier('recaptcha-container');
recaptchaVerifier.render();
}
function one() {
window.location.href = 'insert.php';
}
function phoneAuth() {
//get the number
var number=document.getElementById('number').value;
//phone number authentication function of firebase
//it takes two parameter first one is number,,,second one is recaptcha
firebase
.auth()
.signInWithPhoneNumber( number, window.recaptchaVerifier )
.then(
function ( confirmationResult ) {
//s is in lowercase
window.confirmationResult = confirmationResult;
coderesult = confirmationResult;
console.log(coderesult);
alert("Message sent");
}
)
.catch(
function (error) {
alert(error.message);
}
);
}
function codeverify() {
var code = document.getElementById('verificationCode').value;
coderesult
.confirm(code)
.then(
function ( result ) {
alert("Phone Number Verified");
var user=result.user;
console.log(user);
}
)
.catch(
function ( error ) {
alert(error.message);
}
);
}
只需使一个函数buttonClicked((并将其设置为点击按钮：
function buttonClicked()
{
phoneAuth();
codeverify();
}
单击按钮时，此功能将运行并启动两个内部功能。请确保将它放在phoneAuth((和codeverify((的定义之后。
在执行phoneAuth((之前，您已经被发送到insert.php。所以我建议你使用ajax来调用insert.php，就像这个一样
function one(){
$.ajax({
url: insert.php,
method: 'YOUR_METHOD_POST_GET_OR_OTHER',
success: function(result){
//Do something with the response if you want
},
error: function(xhr, status, error){
//Show error or something here
}
});
}
有很多方法可以实现你想要的。。。但我更喜欢简单地写一个"；控制器功能"；它可以执行您需要的任意多个子功能：
function one() {
// does the first thing
}
function two() {
// does another thing
}
function controller() {
one();
two();
}
<button id="verify" class="block" type="button" onclick="controller();">
话虽如此，您可以用onclick调用多个函数。但我认为您面临的问题是，您调用的第一个函数(one()(正在请求另一个页面(window.location.href(。当您的函数执行时，您实际上是在离开页面并从内存中卸载javascript。换句话说，在第二个函数有机会执行之前，您可能会中止页面/脚本。您需要更改功能的顺序，使用控制器功能，并在控制器中以适当的顺序执行功能。。。或者在函数中使用ajax/async方法。而且确保按钮标签中所有html属性之间都有空格。id、类和类型之间没有空格。。。这也可能是导致失败的原因。
此外，这个问题以前已经回答过了。。。
如何创建一个在点击？
要向DOM元素添加一个或多个事件侦听器，请使用addEventListener
- 请参阅：https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener
要从DOM元素中删除一个或多个事件侦听器，请使用removeEventListener
- 请参阅：https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/removeEventListener
考虑到以上内容，一个干净、不引人注目的内联属性替代品：
onclick="one(); phoneAuth();"
将是：
const verifyButton = document.getElementById('verify');
verifyButton.addEventListener('click', one, false);
verifyButton.addEventListener('click', phoneAuth, false);