50693


大変お世話になっております。

あるページのリンクをクリックすると、ログインフォームのページが開かれ、そこでユーザーID/パスワードを入力し、ログインボタンを押すと、あるページにログインすることができるという以下の流れがあります。

①②へのリンクをクリック  
②ログインフォームに入力、ログインボタンをクリック  
③目的のページにログイン

この、②のページでユーザーID（email）とパスワードの入力、そしてログインボタンをクリックという３つの作業を、例えばJavaScriptを利用することにより、①で②へのリンクをクリックした時点で③のページが開かれている様にしたい為、以下の様な設定に致しましたが（簡略化しております）、②のページが開かれた時点で何の動作も致しません（しかしながら、②が開かれた後、ユーザーID/パスワードを入力することなく、ログインボタンをクリックするだけでページ③にログインはされます）。

どの様に変更すれば、目的の動作をするかご教示頂けませんでしょうか。

[code]

    ②のindex.html
    
    <!doctype html>
    <html>
    <head>
    </head>
    <body>
    
    <script>
    document.getElementById('button').click();
    </script>
    
    <form id="LoginForm" name="LoginForm"   method="post" class="LoginForm">
    
    <input type="text" name="email" id="email" style="width:90%"  value="test_login@gmail.com">
    
    <input type="password" name="pass" id="pass" style="width:90%" value="test_login">
    
    <input type="submit" name="button" id="button" value="ログイン" class="sendButton">
    
    </form>
    
    </body>
    </html>
    
[/code]


CC BY-SA 4.0
2018-11-27T22:32:12.347
50692
2018-11-28T02:51:18.007
2018-11-28T02:51:18.007
19211
19211
question
javascript html
JSを利用し、あるページを開いた時点で、ログインボタンのクリックを実行したいです。


HTMLは上から順番に解釈され、`script`要素があるとその時点でそのスクリプトが実行されます。

ということは、ご質問の例では、`document.getElementById('button').click();`が実行された段階ではまだ`<form>`以降は読み込まれていないことになります。すなわち、まだログインボタンが読み込まれていないため、存在しないボタンをクリックしようとしてエラーになっていると考えられます。

目的の動作をさせるための簡単な方法は、`script`要素の位置を変えることで、ボタンが読み込まれたあとに実行されるようにすることです。例えば以下のように、`<form>`よりもあとに移動させれば動作すると思います。

[code]

    <!doctype html>
    <html>
    <head>
    </head>
    <body>
    
    <form id="LoginForm" name="LoginForm"   method="post" class="LoginForm">
    
    <input type="text" name="email" id="email" class="  validate[required,custom[email]] text-input" style="width:90%"  value="test_login@gmail.com">
    
    <input type="password" name="pass" id="pass" class="validate[required,minSize[6]] text-input" style="width:90%" value="test_login">
    
    <input type="submit" name="button" id="button" value="ログイン" class="sendButton">
    
    </form>
    
    <script>
    document.getElementById('button').click();
    </script>
    
    </body>
    </html>
    
[/code]

もし`script`要素の位置を移動させるのが望ましくない場合は、`DOMContentLoaded`イベントを利用して、ページが読み込まれたあとに実行するように指示します。この場合はスクリプトを以下のように書くとよいでしょう。

[code]

    document.addEventListener('DOMContentLoaded', function() {
        // ページが読み込まれたあとに実行される部分
        document.getElementById('button').click();
    });
    
[/code]


CC BY-SA 4.0
2018-11-28T00:41:44.980
50693
2018-11-28T00:41:44.980
30079
50692
answer