HTMLフォームが特定のデザインで非応答

私はスプレッドシート用の簡単なHTMLフォームを用意しています。これを使用すると、データを入力してそのデータをスクリプトに使用できます。今、私は誰かにHTMLファイルへのいくつかのデザイン調整をさせて、何らかの理由でこれ以上は動作しないように見える（ボタンは応答しない/関数を呼び出さない）。最初のバージョンは動作し、2番目のバージョンは動作しません。HTMLフォームが特定のデザインで非応答

HTMLファイルで何がうまくいかないのかをトラブルシューティングするにはどうすればよいですか。 - あなたは、そのスタイルを制御するために、別のdivにあなたのボタンを包みますがでてきました

：

<!DOCTYPE html> 
<html> 

<head> 
    <base target="_top"> 
</head> 
<br> 
<script> 
    function myFunction() 
    { 
     var date = new Date(); 
     document.getElementById('date').placeholder = date.toLocaleDateString(); 
    } 
</script> 
<body onload= "myFunction()"> 
    <div align="center"> 
     <form> 
      Project Name 
      <font color=red>*</font>:<br> 
      <input type="text" name="pName"> 
      <br> 
      <br> Project Owner 
      <font color=red>*</font>:<br> 
      <input type="text" name="pOwner"> 
      <br> 
      <br> Sheet Responsible:<br> 
      <input type="text" name="pResp"> 
      <br> 
      <br> Starting Time:<br> 
      <input type="text" name="pDate" id="date"> 
      <br> 
      <br><br> 
      <input type="button" value="Create" onclick="google.script.run 
       .withSuccessHandler(google.script.host.close) 
       .createSheet(this.parentNode)" /> 
     </form> 
    </div> 
</body> 

</html> 
----------------------------------------------------------------------------------------------------- 
<!DOCTYPE html> 

<html> 
<style> 
    div { 
     margin: auto; 
     width: 40%; 
     font-family: Arial; 
    } 
    div.button { 
     text-align: center; 
    } 
    input[type=text] { 
     width: 100%; 
    } 
</style> 
<script> 
    function myFunction() 
    { 
     var date = new Date(); 
     document.getElementById('date').placeholder = date.toLocaleDateString(); 
    } 
</script> 
<head> 
    <base target="_top"> 
</head> 
<br> 

<body onload="myFunction()"> 
    <div> 
     <form> 
      Project Name 
      <font color=red>*</font>:<br> 
      <input type="text" name="pName"> 
      <br> 
      <br>Project Owner 
      <font color=red>*</font>:<br> 
      <input type="text" name="pOwner"> 
      <br> 
      <br>Sheet Responsible:<br> 
      <input type="text" name="pResp"> 
      <br> 
      <br>Starting Time:<br> 
      <input type="text" name="pDate" id="date"> 
      <br> 
      <br> 
     <div class="button"> 
      <br> 
      <input type="button" value="Create" onclick="google.script.run 
       .withSuccessHandler(google.script.host.close) 
       .createSheet(this.parentNode)" /> 
     </div> 
     </form> 
    </div> 


</body> 

</html>

出典

2016-10-05 Jonnyboy

'.createSheet（this.parentNode.parentNode）'を試してください。もう一つの 'parentNode' –

は何が起こるかを参照してください：

コードとの明らかな間違いがあります親ノードを変更したのと同じ時間です。

- あなたのボタンがそのdivに包まれていなかった場合は、formが親ノードとなりおよびthis.parentNodeが空のプロパティを持つオブジェクトを返します：

console.log("parent node is %s", JSON.stringify(element)); ==> 
parent node is {"0":{},"1":{},"2":{},"3":{},"4":{}}

- ラップした後、同じエンティティが完全に空であります：

console.log("parent node is %s", JSON.stringify(element)); ==> 
parent node is {}

- そして、あなたの関数は、それはすべてちょうど（あまりにも、それはおそらくクラッシュしました）サーバ側に行かない引数としてそれを取ることを望んでいません。

あなたはそれがdivことを削除せずに再び動作させるために何ができますか？おそらく、他の何があなたのcreateSheet()関数に渡すことができるか把握するでしょう。

あなた自身でエラーを見つけるにはどうすればよいですか？おそらく、この種の他のクライアント側の機能を作成します。

function newFunction(element) { 
    console.log("parent node is %s", JSON.stringify(element)); 
    google.script.run.withSuccessHandler(google.script.host.close).createSheet(element); 
}

だからあなたのクリックハンドラは、この追加機能を使用すると、コンソールから（またはいくつかのあなたのコード内で何が起こっているのかを追跡することができるようになるonclick="newFunction(this.parentNode)"

に変更します他の方法で）インラインイベント割り当てを使用する場合よりも簡単です。

出典

2016-10-05 22:02:21

HTMLフォームが特定のデザインで非応答

答えて

関連する問題