Question

我是一个新手学习JavaScript的项目有效，但我试图在新窗口中添加if / if else语句来嵌入其他文本。我已经编写了一个较小的测试器脚本来试图找出如何使其工作，然后我将把它合并到我的大项目中。

对于这个问题：

我有一个带有提交按钮和选择选项的简单表单。有三个名称选择。如果有人选择了名称，我希望在新窗口中显示不同的文本并选择值。

我关闭了，因为它在我尝试常规文本输入选项时有效，但是我的if-else语句出现了问题。

就像我说的，我是非常新的，所以使用onClick等，我真的知道该怎么做。这是我的代码：

<!doctype html>
<html>
<head>
<title>JavaScript Forms</title>
<meta charset="utf-8">

<link rel="stylesheet" type="text/css" href="mystyle.css">

<script language=""JavaScript">

function newWindow() {
 allInfo= open("", "displayWindow");

   allInfo.document.open();

allInfo.document.write('<!doctype html><html><head><title>Resume</title><meta charset="utf-8"</head><body>');
allInfo.document.write(document.getElementById ('firstname').value);
allInfo.document.write('</body></html>');

   allInfo.document.close();

}

function showName() {

if ( document.getElementById('firstname').value == "Michael" ) {
allInfo.document.write("Mr. " + document.getElementById ('firstname'));
} 
else if ( document.getElementById('firstname').value == "Sam" ) {
allInfo.document.write("Mrs. " + document.getElementById ('firstname'));
}
else ( document.getElementById('firstname').value == "Doug" ) {
allInfo.document.write("Sir " + document.getElementById ('firstname'));
}



}



</script>


</head>

<body>

<script language="JavaScript">
</script>

<form id="infoForm" method="post" name="infoForm">

<p>First Name: </p>
 <select id="firstname" onChange=showName(); >
  <option value="Michael">Michael</option>
  <option value="Sam">Sam</option>
  <option value="Doug">Doug</option>
 </select></p>



  <p> <input type="button" value="Submit Information" onClick="newWindow(), showName()"></p>


</form>

</body>

</html>

如果有人能告诉我为什么这不起作用，请提前致谢。

Answer 1

您应该将输入的值而不是输入的DOMElement传递给document.write

function showName() {
    var name=document.getElementById('firstname').value;

    if ( name == "Michael" ) {
        allInfo.document.write("Mr. " + name);
    } else if ( name == "Sam" ) {
        allInfo.document.write("Mrs. " + name);
    }  else if ( name == "Doug" ) {
        allInfo.document.write("Sir " + name);
    }
}

请注意，我将名字的值存储在变量中。每次使用DOM函数再次检索值时，都会浪费资源。

作为一般建议，请花些时间学习如何使用像jQuery这样的DOM操作库。它会改变你的生活。

Answer 2

尝试使用Jquery：

    <html>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
      <select name="firstname" id="firstname">
         <option value="Michael">Michael</option>
         <option value="Sam">Sam</option>
         <option value="Doug">Doug</option>
      <select>

     <input type="button" value="Submit Information" id="submit">


  <script>
        function newWindow(txt) {
            allInfo= open("", "displayWindow");
            allInfo.document.open();
            allInfo.document.write('<!doctype html><html><head><title>Resume</title><meta charset="utf-8"</head><body>');
            allInfo.document.write(txt);
            allInfo.document.write('</body></html>');
            allInfo.document.close();
        }


         $('#submit').click(function() {
            var name = $("#firstname").val();
            if(name == "Michael"){
                newWindow("Mr."+name);
            }
            if(name == "Sam"){
                newWindow("Mr."+name);
            }
            if(name == "Doug"){
                newWindow("Mr."+name);
            }

         });
      </script>
    </html>

Answer 3

使用JavaScript：

                <html>
                        <head>
                        <title>JavaScript Forms</title>
                        <meta charset="utf-8">

                        <link rel="stylesheet" type="text/css" href="mystyle.css">

                        <script language=""JavaScript">

                        function newWindow(text) {
                         allInfo= open("", "displayWindow");

                           allInfo.document.open();

                        allInfo.document.write('<html><head><title>Resume</title><meta charset="utf-8"</head><body>');
                        allInfo.document.write(text);
                        allInfo.document.write('</body></html>');

                           allInfo.document.close();

                        }

                        function showName() {
                        var name = name = document.getElementById('firstname').value;
                        if ( document.getElementById('firstname').value == "Michael" ) {
                            newWindow(name);
                        } 
                        else if ( document.getElementById('firstname').value == "Sam" ) {
                            newWindow(name);
                        }
                        else if( document.getElementById('firstname').value == "Doug" ) {
                            newWindow(name);
                        }



                        }



                        </script>


                        </head>

                        <body>

                        <script language="JavaScript">
                        </script>

                        <form id="infoForm" method="post" name="infoForm">

                        <p>First Name: </p>
                         <select id="firstname" >
                          <option value="Michael">Michael</option>
                          <option value="Sam">Sam</option>
                          <option value="Doug">Doug</option>
                         </select></p>



                          <p> <input type="button" value="Submit Information" onClick="showName()"></p>


                        </form>

                        </body>

                </html>

Javascript新手if / if else不能使用表单中的select选项

3 个答案: