I've created a simple page which uses a JavaScript file and the onClick method to display different div tags. I have a much more complex program which signs a user in using ajax, it works fine in a browser but not in the popup
The more I read, and I've read everything on the developers site that I can find the more confused I get. Chrome extensions do not allow inline JavaScript which is fine, but I'm still not sure how I can actually write JavaScript. I know it has something to do with event handlers, but even that is just me guessing.
Can anyone take this program and show me what I need to change to get it to work in a popup using "manifest_version": 2 and no hacks. How do Google expect people to use JavaScript? There really needs to be a hello world program showing how to do this.
HTML:
<!DOCTYPE HTML>
<html>
<head>
<title> Pop Up </title>
<script src = "test.js"></script>
<style type = "text/css">
#signout
{
display:none;
}
</style>
</head>
<body>
<!-- ///////////////////////////////////////////// -->
<!-- //////////////// Log In Screen ////////////// -->
<!-- ///////////////////////////////////////////// -->
<div id = "login">
<form method="post" action="">
Username:
<input type="text" name = "user" id = "user"><br>
Password:
<input type="text" name = "pass" id = "pass"><br>
<input type="button" value="submit" onClick="logInPHP()" />
</form>
</div>
<!-- ///////////////////////////////////////////// -->
<!-- //////////////// Sign Out Screen //////////// -->
<!-- ///////////////////////////////////////////// -->
<div id = "signout">
Your are Currently signed in.<br />
<a href = "#" onclick = "signOutPHP()">Sign Out</a>
</div>
</body>
</html>
Javascript:
function logInPHP(){
document.getElementById("login").style.display = "none";
document.getElementById("signout").style.display = "inline";
}
function signOutPHP(){
document.getElementById("login").style.display = "inline";
document.getElementById("signout").style.display = "none";
}
You can't use onclick attributes directly in the HTML file. Remove them and wrap your JavaScript code into the document 'DOMContentLoaded' event listener.
document.addEventListener('DOMContentLoaded', function () {
document.getElementById("login").addEventListener('click', function(){
document.getElementById("login").style.display = "none";
document.getElementById("signout").style.display = "inline";
});
document.getElementById("signout").addEventListener('click', function(){
document.getElementById("login").style.display = "inline";
document.getElementById("signout").style.display = "none";
});
});