Disclaimer - have checked the .innerHTML questions that have been submitted previously, but none of the problems are particularly relevant to this, as the majority of the other ones are due to not waiting on the DOM first.
Anyway, when I user .innerHTML the expected
tag's value just remains the same. I tested the variables - that are to be inputted to the
tag - and they work, the test was with alerts instead of text.
Could just make the program use alerts but just seems like it is avoiding the problem and I believe it is less appealing to the eye.
I expected it was the .innerHTML tag that was causing problems - as the
tag is in my form - so I moved the
tag out. Still no response, the
tag dosen't change.
As a result, I moved to .value, expecting a different outcome, but nope. Same. The
tag never changes its value.
<!DOCTYPE html>
<html>
<head>
<!--JavaScript file-->
<script type="text/javascript" src="PasswordStengthChecker.js"></script>
</head>
<body>
<!--Title-->
<h2>User Login</h2>
<!--Form-->
<form name="login" id="login" action="" method = "post" >
<fieldset>
<p> <h1>Welcome</h1> </p>
<!--Email Address-->
<p>
<label for="email">Email</label>
<input name="email" type="text" id = "formEmail" required>
</p>
<!--Password-->
<p>
<label for="password">Password</label>
<input name="password" type="password" id="formPassword" required>
</p>
<!--Confirm Password-->
<p>
<label for="Confrim Password">Password</label>
<input name="formPassword" type="password" id="formConfirmPassword" required>
</p>
<p>
<!--Submit Form Button-->
<input type="Submit" onclick="passwordChecker()" name="Submit" value="Submit">
<!--Reset Input Boxes Button-->
<input type="reset" name="Reset" value="Reset">
</p>
</fieldset>
</form>
<!--Gets Input from .js File-->
<p name = value = "feedback" >Feedback</p>
</body>
</html>
.js
function passwordChecker()
{
//declare varibales
var fPassword, fConfrimPassword, text;
// Get the value of the input fields for passwords
fPassword = document.getElementsByName("formPassword").value;
fConfrimPassword = document.getElementsByName("formConfrimPassword").value;
//check password is the same
if (fPassword == fConfrimPassword)
{
//test
text = "Passwords Match";
//return text;
}
else
{
//Password dosent match confirmed password
text = "Input OK";
//return text;
}
var feedback = document.getElementsByClassName("feedback");
feedback.value = text;
}
The.innerHTML tag I was using before
document.getElementsByClassName("feedback").innerHTML = text;
I have tried the text variable with the return as well, did not expect them to be needed though.
tag's value is default to "feedback" and it remains the same
– Harvvv Jul 28 '18 at 10:17Feedback
` `document.getElementsByClassName("feedback")[0].textContent = "test";` – Aleksander Azizi Jul 28 '18 at 10:27