After document.getElementsById("occ").innerHTML = "Already registered"; tag <h2 style="color: red" id ="occ"></h2> doesn't change, but page looks like it reloaded. Code:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Ustory - Register</title>
<link href="https://fonts.googleapis.com/css?family=Raleway:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">
<link href="CSS_defaults.css" rel="stylesheet">
<script src="Ustory_JS.js"></script>
</head>
<body>
<?php
if($_GET['occupied'] == "true") {
echo($_GET['occupied']);
$occupied = "true";
}
?>
<script>
var occ = <?php echo json_encode($occupied); ?>;
alert(typeof(occ));
if(occ == "true") {
alert("done");
document.getElementsById("occ").innerHTML = "Already registered";
}
</script>
<div id="reg_in" class="reg" style="color:#FF4D50;">
<form class="reg" name="register" action="U_story_reg.php" method="post" onsubmit="return register_()">
<input type="text" name="firstname" id="firstname" placeholder="Meno" required> <b>*</b><br>
<input type="text" name="lastname" id="lastname" placeholder="Priezvisko" required> <b>*</b><br>
<input type="text" name="nick" id="nick" placeholder="Prezívka"> <br>
<input type="email" name="mail" id="mail" placeholder="E-mail" required> <b>*</b><br>
<input type="password" name="pass" id="pass" placeholder="Heslo" required> <b>*</b><br>
<input type="password" name="pass_again" id="pass_again" placeholder="Heslo znovu" required> <b>*</b><br>
<input type="submit" value="Submit">
<h2 style="color: red" id ="occ"></h2>
</form>
</div>
<h2 style="color: red" id ="occ"></h2>
</body>
</html>
Do you have any idea why document.getElementsById("occ").innerHTML = "Already registered"; doesn't work ?
The code is executing before the DOM element has loaded & you have a typo in getElementsById should be getElementById. You have to either move the code below the html element you are trying to change or wrap it in a $(document).ready function. Like this:
$(document).ready(function() {
var occ = <?php echo json_encode($occupied); ?>;
alert(typeof(occ));
if(occ == "true") {
alert("done");
document.getElementById("occ").innerHTML = "Already registered";
}
});
In addition, make sure you reference the jQuery library in order to use the document.ready() method. Check out the link below for further information.. https://www.w3schools.com/jquery/event_ready.asp