HTML 디자인이 특정 디자인에서 응답하지 않습니다

일부 데이터를 입력하고 스크립트에서 물건을 처리하는 데 사용할 수있는 간단한 스프레드 시트 용 HTML 양식이 있습니다. 이제는 HTML 파일에 약간의 디자인 조정을하고 다른 이유로는 더 이상 작동하지 않는 것 같습니다 (버튼이 응답하지 않거나 함수를 호출하지 않음). 첫 번째 버전은 작동하지만 두 번째 버전은 작동하지 않습니다.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 디자인이 특정 디자인에서 응답하지 않습니다

답변

관련 문제