因此，对于我的网页设计课程，我的老师要求我教课程简单的 javascript，我想制作一个简单的网站，我的老师或我都可以用它来做这件事。我希望它是（我认为很简单）有一个登录框的东西，当你登录时，如果你使用我的登录名或我老师的登录名，它会起作用，它会创建按钮或重定向到另一个上面有按钮的页面，但由于某种原因，我用于登录的 if else 语句（因为它只有两个实例是真的不想工作。
编辑：我仍在学习 Javascript，并且只了解它的一些非常基本的部分。（这就是我需要做的所有事情）我要做的就是让按钮出现，这样我就可以使用它们来调用创建信息的函数，这些信息在单击它们时会被写出。例如，要在给出正确的登录信息时创建按钮，然后当出现的按钮出现时，您可以单击第一个按钮，然后会出现有关脚本标签的段落。
密码和名称检查功能的工作没有太大问题，当我让它们都发出警报时，如果它是正确的，第一个是 eeyup，如果给出的信息是错误的，它们都可以工作。只有当我尝试使用 document.write 时才会遇到问题
*目前，它的作用是按钮在屏幕上闪烁一秒钟然后消失，登录框/屏幕重新出现。*
我正在使用的登录功能是：
<script type="text/javascript">
function validator(){
var name = document.KageForm.User.value;
var password= document.KageForm.pass.value;
if(password=="mypassword" && name=="myusername"|| password=="myteacherspassword" &&name=="myteachersname" ){
document.write(showbuttons());
} else {
document.write("This is not meant for you to see.");
}}
</script>
显示按钮的函数 showbuttons 如下所示：
function showbuttons(){
document.write("<div><form><input type=\"button\" value=\"Starting Your Script\" onclick=\"FirstThingsFirst()\"/><br/><input type=\"button\" value=\"Learn about document.write\" onclick=\"writing()\" /><br/><input type=\"button\" value=\"Variables\"onclick=\"settingVariables()\" /><br/><input type=\"button\" value=\"Using Functions\" onclick=\"usingFunctions()\" /><br/><input type=\"button\" value=\"If Statements\" onclick=\"usingIfStatements()\" /><br/><input type=\"button\" value=\"Else Statements\" onclick=\"usingElseStatements()\" /><br/><input type=\"button\" value=\"Return to Login\" onclick=\"homepage()\" /></form></div>")
document.body.style.backgroundImage="url('https://fc04.deviantart.net/fs70/f/2013/029/6/8/smoke_by_kage_kaldaka-d5t50d9.jpg')";
document.getElementById('thisshouldbewhite').style.color="white";
document.getElementById('thisshouldbewhite').style.width="400px";
document.getElementById('thisshouldbewhite').style.fontFamily="helvetica";
}
整个页面的总代码是这样的：（另外如果按钮拉起的文字有什么不准确的地方，请指出）
<!doctype html>
<html>
<head>
<style type="text/css">
body {background-image:url(https://fc04.deviantart.net/fs70/f/2013/029/6/8/smoke_by_kage_kaldaka-d5t50d9.jpg)}
body{
font-family:helvetica;
color:darkviolet;
}
h2 {color:darkviolet;}
#tag1 {width:480px;}
#wrapper { width:960px;margin:0 auto; }
}
div {
margin: 5px;
border: 5px solid darkviolet;
width:50%;
}
img {
width:20.00%;
height:20.00%;
}
ul li a {
margin: 10px;
padding: 2px;
background: #f2a7c6;
float: left;
border: 2px ;
}
a:link {text-decoration:none
color:darkviolet;}
h3 {
font-family:helvetica;
color:darkviolet
}
#white {
color:white;
}
</style>
<script type="text/javascript">
/*<input type=\"button\" value=\"Starting Your Script\" onclick=\"FirstThingsFirst()\"/><br/><input type=\"button\" value=\"Learn about document.write\" onclick=\"writing()\" /><br/><input type=\"button\" value=\"variables\"onclick=\"settingVariables()\" /><br/>input type=\"button\" value=\"Using Functions\" onclick=\"usingFunctions()\" /><br/>input type=\"button\" value=\"If Statements\" onclick=\"usingIfStatements()\" /><br/>input type=\"button\" value=\"Else Statements\" onclick=\"usingElseStatements()\" />*/
function FirstThingsFirst() {
var mytext = "<div id=\"thisshouldbewhite\"> To start writing Javascript into your page, you must first make use of the script tag. The tag is 'script' type=\"text/javascript\" with the closing tag simply being /script. you can use a Javascript either in your heading of your page, after the style tag, or anywhere in your body. Personally, I prefer to put all my script, or at least my functions, in the head of my page.</div> <input type=\"button\" value=\"Return to Home\" onclick=\"homepage()\" />"
document.write(mytext);
document.body.style.backgroundImage="url('https://fc04.deviantart.net/fs70/f/2013/029/6/8/smoke_by_kage_kaldaka-d5t50d9.jpg')";
document.getElementById('thisshouldbewhite').style.color="white";
document.getElementById('thisshouldbewhite').style.width="400px";
document.getElementById('thisshouldbewhite').style.fontFamily="helvetica";
}
function writing()
{
var mytext = "<div id=\"thisshouldbewhite\">To write something out on your screen, you use the command \'document.write()'. To get what you want to appear, put qutation marks around it in the paranthesis. So to write out \"bacon\", you would put: document.write(\"bacon\") in your script. Document.write() is used for many things, mainly displaying information based on input data given to the page by the user that fits into variables defined by the creator of the page. For example, document.write(variableX()) would print out anything that has been put in for variableX.</div><input type=\"button\" value=\"Return to Home\" onclick=\"homepage()\" />"
document.write(mytext);
document.body.style.backgroundImage="url('https://fc04.deviantart.net/fs70/f/2013/029/6/8/smoke_by_kage_kaldaka-d5t50d9.jpg')";
document.getElementById('thisshouldbewhite').style.color="white";
document.getElementById('thisshouldbewhite').style.width="400px";
document.getElementById('thisshouldbewhite').style.fontFamily="helvetica";
}
function settingVariables(){
document.write("<div id=\"thisshouldbewhite\">to create a variable, youtype in \'var\' followed by a space, then the name of the variable, an = then what the variable is equal to. So, if you had food on your mind and wanted your variable to be \'bacon\' your variable would be: var food=\"bacon\"</div><input type=\"button\" value=\"Return to Home\" onclick=\"homepage()\" />")
document.body.style.backgroundImage="url('https://fc04.deviantart.net/fs70/f/2013/029/6/8/smoke_by_kage_kaldaka-d5t50d9.jpg')";
document.getElementById('thisshouldbewhite').style.color="white";
document.getElementById('thisshouldbewhite').style.width="400px";
document.getElementById('thisshouldbewhite').style.fontFamily="helvetica";
}
function usingFunctions(){
document.write("<div id=\"thisshouldbewhite\">Functions are used to use commands only when triggered, or to do multiple things at once. for example, open up a website and type in the following code: <br/> <i>function troll(){<br/>document.write(\"gotcha!\");<br/>document.write(gotcha());<br/> function gotcha(){<br/>document.write(\" hahahaha!\");<br/>document.write(troll())</i>;<br/> What this will do is that the first function will call the second function, and then when the second function is called it will call the first function.Since neither are being called at the moment, create a button in your html as usual, but in the starting tag, add the property\"onClick\". Name your button something like, 'start trolling' or something like that. So, your code for your input should look something like <i><-input type=\"button\" value=\"Starting Your Script\" onclick=\"FirstThingsFirst()\"/></i> <br/> obviously minus the dash at the start of the tag.</br><input type=\"button\" value=\"Commence Trolling\" onclick=\"troll()\"/></div><input type=\"button\" value=\"Return to Home\" onclick=\"homepage()\" />");
document.body.style.backgroundImage="url('https://fc04.deviantart.net/fs70/f/2013/029/6/8/smoke_by_kage_kaldaka-d5t50d9.jpg')";
document.getElementById('thisshouldbewhite').style.color="white";
document.getElementById('thisshouldbewhite').style.width="400px";
document.getElementById('thisshouldbewhite').style.fontFamily="helvetica";
}
function usingIfStatements(){
document.write("<div id=\"thisshouldbewhite\">If statements are used to create scenarios such as login screens, since that is the use that will be most familiar to most of us. An If statement goes inside the function tag, so when in use the statement looks like this:<br/>function login(){<br/>if(conditions for if statement){commands for if statement to follow}}<br/> Here is an example of a functional function using an IF Statement:<br/>function login(){<br/>var name=\"your name\";<br/>if(name==\"your name\"){document.write(\"You are indeed yourself\")}}<br/>This would print out the words in the command following the If statement, since the statement is true, since the variable, \"name\" is equal to \"your name\"</div><input type=\"button\" value=\"Return to Home\" onclick=\"homepage()\" />");
document.body.style.backgroundImage="url('https://fc04.deviantart.net/fs70/f/2013/029/6/8/smoke_by_kage_kaldaka-d5t50d9.jpg')";
document.getElementById('thisshouldbewhite').style.color="white";
document.getElementById('thisshouldbewhite').style.width="400px";
document.getElementById('thisshouldbewhite').style.fontFamily="helvetica";
}
function usingElseStatements(){
document.write("<div id=\"thisshouldbewhite\">So, we know how to make an If statement, now we are going to use Else statements. This would be like on a login screen, if you type in inaccurate information and it gives you an error message<i><br/>function login(){<br/>if(conditions for if statement){commands for if statement to follow}else(commands for script to follow if your If statement is not true)}</i><br/> Here is an example of a functional function using an IF Statement:<i><br/>function login(){<br/>var name=\"your name\";<br/>if(name==\"your name\"){document.write(\"You are indeed yourself\")else{document.write(\"you are not yourself when you're hungry.\")}}}<br/></i></div>")
document.body.style.backgroundImage="url('https://fc04.deviantart.net/fs70/f/2013/029/6/8/smoke_by_kage_kaldaka-d5t50d9.jpg')";
document.getElementById('thisshouldbewhite').style.color="white";
document.getElementById('thisshouldbewhite').style.width="400px";
document.getElementById('thisshouldbewhite').style.fontFamily="helvetica";
}
function troll(){
document.write("gotcha!");
document.write(gotcha());
}
function gotcha(){
document.write(" hahahaha!");
document.write(troll())
}
function homepage()
{
window.location.href = "file:///C:/Users/Admin/Documents/Websites/TEst.html";
}
function gotoButtons()
{
window.location.href = "file:///C:/Users/Admin/Documents/Websites/Buttons.html";
}
function showbuttons(){
document.write("<div><form><input type=\"button\" value=\"Starting Your Script\" onclick=\"FirstThingsFirst()\"/><br/><input type=\"button\" value=\"Learn about document.write\" onclick=\"writing()\" /><br/><input type=\"button\" value=\"Variables\"onclick=\"settingVariables()\" /><br/><input type=\"button\" value=\"Using Functions\" onclick=\"usingFunctions()\" /><br/><input type=\"button\" value=\"If Statements\" onclick=\"usingIfStatements()\" /><br/><input type=\"button\" value=\"Else Statements\" onclick=\"usingElseStatements()\" /><br/><input type=\"button\" value=\"Return to Login\" onclick=\"homepage()\" /></form></div>")
document.body.style.backgroundImage="url('https://fc04.deviantart.net/fs70/f/2013/029/6/8/smoke_by_kage_kaldaka-d5t50d9.jpg')";
document.getElementById('thisshouldbewhite').style.color="white";
document.getElementById('thisshouldbewhite').style.width="400px";
document.getElementById('thisshouldbewhite').style.fontFamily="helvetica";
}
</script>
</head>
<body>
<script type="text/javascript">
function validator(){
var name = document.KageForm.User.value;
var password= document.KageForm.pass.value;
if(password=="mypassword" && name=="myusername"|| password=="myteacherspassword" &&name=="myteachersname" ){
document.write(showbuttons());
} else {
document.write("This is not meant for you to see.");
}}
</script>
<form name="KageForm">
Username:<input type="text" name="User">
<br/>
Password: <input type="password" name="pass">
<br/>
<input type="image" src="https://a.deviantart.net/avatars/k/a/kage-kaldaka.png?6"
value="Submit" onclick="validator()" />
<br/>
<input type="button" value="Starting Your Script" onclick="FirstThingsFirst()"/>
<br/>
<input type="button" value="Learn about document.write" onclick="writing()" />
<br/>
<input type="button" value="Variables"
onclick="settingVariables()" />
<br/>
<input type="button" value="Using Functions" onclick="usingFunctions()" />
<br/>
<input type="button" value="If Statements" onclick="usingIfStatements()" />
<br/>
<input type="button" value="Else Statements" onclick="usingElseStatements()" />
<br/>
<input type="button" value="" onclick="" />
<br/>
<input type="button" value="" onclick="()" />
<br/>
<input type="button" value="" onclick="()" />
<br/>
<input type="button" value="" onclick="()" />
</form>
</body>
</html>