入力が空であれば境界線の色は変化しません

Question

空であればinputフィールドの境界線の色を変更するPHPとJavascriptで書かれた簡単なスクリプトがあります。

以下のコードを使用して、境界線の色を変更すると、次のエラーが表示されていません：

Uncaught TypeError: Cannot read property 'style' of null

<?php 
if(isset($_POST['submit'])) { 
if(empty($_POST['username'])) { 
echo' 
<script> 
document.getElementById("username").style.border = "1px solid red"; 
</script> 
'; 
} 
} 
?> 

<form method="post"> 
<input type="text" id="username" name="username"> 
<input type="submit" name="submit"> 
</form> 

Answer 1

は、あなたのスクリプトの先頭にwindow.onload = function() {...}を追加する必要があります。

<?php 

if (isset($_POST["submit"])) { 

    if (empty($_POST["username"])) { 

     echo " 
      <script> 
       window.onload = function() { 

        document.getElementById('username').style.border = '1px solid red'; 
       }; 
      </script>"; 
    } 
} 

---

<form method="post"> 
    <input type="text" id="username" name="username"> 
    <input type="submit" name="submit"> 
</form>