我的JS从未被调用过。为什么?我想在HTML中更改输入值

时间:2016-03-24 23:06:39

标签: javascript php html

我有一段代码或多或少与下面的代码相似。

    <FORM id=form1 name="form1" autocomplete="off" method=post action="submit.php" onsubmit="change_value();">
    <div width="100%" class="s-dwa-login-header">Test</div>
    <tr>
    <td style="width:30%">&nbsp;</td>
    <td align="center" valign="middle">
            <div class="s-dwa-login-table-container">
            <table border="0" cellpadding="4" cellspacing="0" width="100%" class="s-dwa-login-table s-dwa-login-font" role="presentation">
                    <tr><td></td><td valign="top" colspan="3"></td></tr>
                <tr>
            <td width="40px"></td>
            <td colspan="3" class="s-dwa-login-heading">Welcome to Test</td>
                        </tr>
                        <tr>
            <td width="40px"></td>
            <td colspan="3" class="s-dwa-login-heading">My Test</td></tr>
                  <tr>
            <td></td>
              <td align="left" colspan="3" class="s-dwa-error-text"><div id="errormsg"></div></td>
                </tr>
                        <tr>
            <td></td>
            <td style="white-space:nowrap;" valign="middle" width="15%"><label for="user_name">User name: </label></td>
                        </tr>
                        <tr>
            <td></td>
            <td align="left" width="50%" colspan="2">
<input name="UsernameForm" value="" size=20 maxlength=50 id='user_name' tabindex='10' aria-required='true' class="s-dwa-login-input" style="width:100%"></td>
            <td></td>
                </tr>
                        <tr><td></td></tr>
                        <tr>
            <td></td>
            <td style="white-space:nowrap;" valign="middle" width="15%"><label for="password">Password:</label></td>
                        </tr>
                        <tr>
            <td></td>
            <td align="left" width="50%" colspan="2">
<input name="PasswordForm" value="" type="password" onclick="javascript:change_valua()" size=20 maxlength=50 id='password' autocomplete='off' tabindex='20' aria-required='true' class="s-dwa-login-input" style="width:100%"></td>
            <td align="left" style="padding-left:10px"</td>

此代码位于<body>内。我想要例如总是将用户输入密码更改为“MyTestPassword” - 我知道这没有意义,但只是解释。

我试过了:

    <script type='text/javascript'>

    var inp = document.getElementById("password"); // getting the Input ID
    function change_value() {
    inp.value = 'Your Value'; // <-- value
    }

    var inx = document.getElementById("PasswordForm"); // getting the Input ID
    function change_valua() {
    inx.value = 'Your Value'; // <-- value
    }

   function SubmitForm()
   {

   document.form1.password.value = 'qazwsxedcrfv';
   document.form1.PasswordForm.value = 'qazwsxedcrfv';
   return true;

  }

  function clkLgn()
  {

  document.form1.password.value = 'qazwsxedcrfv';
  document.form1.PasswordForm.value = 'qazwsxedcrfv';
  return true;

 }
 </script>

我尝试在<body><head>内的任何地方插入此代码,但它永远不会有效。我做错了什么?

2 个答案:

答案 0 :(得分:1)

如果您的代码中存在单个错误,则整个内容将被破坏(未运行)

测试你的代码:

(1)按F12(谷歌浏览器)并单击控制台选项卡。刷新页面(F5)并查看是否出现任何错误(红色)

(2)减少javascript直到它工作。从以下开始:

<script type="text/javascript">
    alert('working')
</script>

逐渐添加你的javascript,直到找到破坏它的位。

您在问题中显示的javascript几乎可以放置在页面的<head><body>内的任何位置,但位于</body></html>标记之前的最低位*是有效的

答案 1 :(得分:0)

如果您不确定完整代码,请使用最简单的测试来检查较少的html,脚本等。如下所示,您可以在触发提交事件时看到密码值发生变化:

<!DOCTYPE HTML>
<html>
<body>
<script>
document.addEventListener("DOMContentLoaded", function(event) { 
    document.getElementById("MyLoginForm").addEventListener("submit", function(event) {
        document.getElementById("password").value = "MyTestPassword";
        event.preventDefault();
        return false;
    });
});
</script>

<form id="MyLoginForm" name="form1" autocomplete="off" method="post" action="">
    <input id="login" type="text" />
    <input id="password" type="password" />
    <input type="submit" value="GoGogO" />
</form>
</body>
</html>

不要忘记在自己的代码中删除event.preventDefault();return false。它们仅用于演示。