I just added firebase OTP authentication and once the code is verified and the user clicks to verify the link is meant to direct the user to another page only if the code is correct but I'm trying to make the link disabled if the OTP is wrong and enabled if the code is correct. I'm very new to JavaScript and firebase here is my code.
function codeverify() {
var code = document.getElementById('code').value;
coderesult.confirm(code).then(function() {
document.getElementsByClassName('p-conf')[0].style.display = 'block';
document.getElementsByClassName('n-conf')[0].style.display = 'none';
}).catch(function() {
document.getElementsByClassName('clicky').removeAttribute('href');
document.getElementsByClassName('p-conf')[0].style.display = 'none';
document.getElementsByClassName('n-conf')[0].style.display = 'block';
})
}
Below is the HTML code
<form id="contactform" class="validate-form was-validated">
<div id="number" class="wrap-input">
<label for="phone" class="form-label">Phone number</label>
<input id="phoneNumber" class="input-box" type="tel" placeholder="Type in your phone number">
<div class="valid-feedback">✅</div>
<div class="invalid-feedback">Please fill out this field.</div>
<div id="recaptcha-container"></div>
<div class="wrap-login-form-btn">
<button type="button" id="btn" class="clicky" onClick="phoneAuth()">
<p>Get OTP</p>
</button>
</div>
</div>
<div id="otp" class="wrap-input">
<label for="code">OTP</label>
<input id="code" class="input-box code-input" type="tel" placeholder="Type in your OTP">
<div class="valid-feedback">✅</div>
<div class="invalid-feedback">Please fill out this field.</div>
<div id="done"></div>
<div class="p-conf">Number Verified</div>
<div class="n-conf">OTP ERROR</div>
<!-- <button type="submit" id="verify" class="clicky verified" onClick="codeverify()">
Verify
</button> -->
<a href="register.html" type="button" id="verify" class="clicky verified" onClick="codeverify()">
Verify</a>
</div>
</form>