Javascript登录重定向不起作用

Question

因此，对于我的Web设计课程，我的老师要求我讲授简单的javascript课程，并且我想创建一个简单的网站，让我的老师或我可以使用它进行操作。 我希望它是一个具有登录框的东西（我认为很简单），并且在您登录时，如果您使用我的登录名或老师的登录名都可以，并且可以创建按钮或重定向到另一个带有按钮的页面，但是由于某种原因，我正在使用if else语句进行登录（因为只有两个实例是正确的，所以不想工作。

编辑：我仍在学习Javascript，并且只了解它足以教它的一些非常基本的部分。 （这是我需要做的atm的全部工作）我要做的就是使按钮出现，以便随后我可以使用它们来调用创建信息的函数，这些信息在单击时会写出。 因此，例如，要在给出正确的登录信息后创建按钮，然后在显示的按钮出现时创建按钮，您可以单击第一个按钮，然后出现有关script标签的段落。

密码和名称检查功能正常工作并没有什么麻烦，当我使它们同时发出警报时，首先是eeyup（如果正确），然后是nnope（如果给出的信息不正确），则它们都可以工作。 只有当我尝试使用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>

显示按钮，显示按钮的功能如下所示：

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>

Answer 1

您必须将每个条件放在自己的括号中

  (((password =="mypassword") && (name=="myusername")) || ((password=="myteacherspassword") && (name=="myteachersname")) )

因此，我们在每个＆符号前加括号...作为其自己的分组。.两个条件在或作为一组之前，而另一侧相同

因此，您总共有六个分组。

另外，如果您打算使用此网站，我曾经问过一个“家庭作业”或与学校有关的问题，并被钉死在十字架上，因为显然不允许这样做。

Answer 2

您的代码中有几个问题：

1. 更改document.write(showbuttons()); 到showbuttons(); 在您的validator()函数中。 由于showbuttons()不返回字符串，而是编写HTML本身；

2. 更改

   <input type="image" src="https://a.deviantart.net/avatars/k/a/kage-kaldaka.png?6" value="Submit" onclick="validator()" />

   至

   <img src="https://a.deviantart.net/avatars/k/a/kage-kaldaka.png?6" value="Submit" onclick="validator()" /> 。

   由于<input type="image" ... />会触发浏览器提交表单并重新加载页面。

您可以在这里查看工作示例http://jsbin.com/ayovom/2/edit 。