javascript - 添加 getElementById 语句后，警报在 Javascript 中停止工作

问题描述

我正在尝试调试绑定到 Google 电子表格的 HTML (showModalDialog) 中的 javascript。Logger.log 和 console.log 都不会出现在任何地方，但大多数时候可以看到警报。我已经削减了我的代码，以找出哪些指令会阻止显示警报。为什么？当我取消注释这两个 getElementById 时，不再显示警报。

      document.getElementById('errMsg').innerHTML = 'All fields are STILL required';  // output field
      document.getElementById("errMsg").style.font-weight = "normal";

如果我将它们注释掉，则会出现警报。

<!DOCTYPE html>
<html>

<head>
    <title>Select Color Change</title>
    <!--This is a comment. -->
    <meta http-equiv='content-type' content='text/html; charset=utf-8' />
    <style>

      #subBut,
      #clrBut,
      #text_before {
        display: block;             /* show */
        visibility: visible;
      }
      
      .whtBkgrd {
        background-color: WHITE;
        border: 1px solid transparent;
        border-color: transparent transparent rgba(0, 0, 0, 0.1);
      }
      
      .coloredBkgrd{
        background-color: #e6f8fa;
        border: 1px solid transparent;
        border-color: transparent transparent rgba(0, 0, 0, 0.1);
      }

    </style>
</head>
<body>
    <!--This is a comment. -->
    <span id='text_before'>
      You have gone to
      <select class='select' name='Q1' id='q1'
        onchange='this.className=this.options[this.selectedIndex].className'>
      <option class='coloredBkgrd' value='0' selected='selected'>Select</option>
      <option class='whtBkgrd' value='a'>a</option>
      <option class='whtBkgrd' value='an'>an</option>
      <option class='whtBkgrd' value='the'>the</option>
      <option class='whtBkgrd' value='nothing '>(nothing) </option>
      </select> doctor for an illness.
    </span> 
 
    <span class='buttons'>
      <span>
        <button type='submit' id='subBut' value='submit' >SUBMIT</button>
        <button type='button' id='clrBut' value='clear' >RESET</button>
      </span>
    </span>
    <hr />
    
    <span>
        <!-- <p></p> -->
      <span id='errMsg' aria-live='polite' >
        Please make all selections.
      </span>
    </span>
    
    <script type='text/javascript'>
        // - - - - - - - -  LISTENERS - - - - - - - -
    document.getElementById('subBut').addEventListener('click', 
      function(event)      {
        alert('Begin submit addEventListener');
//        debugger;
        cSideValidate();
        // event.preventDefault();    //stop form from submitting
      }
    );

    document.getElementById('clrBut').addEventListener('click', 
      function(event)    {
        alert('Begin clear addEventListener');
//        debugger;
      //    the listener has to be separate from the actual function!
        clearReset();
      }
    );
    
    document.getElementById('ansrBut').addEventListener('click', 
      function(event)    {
        alert('Begin ansrBut addEventListener');
//        debugger;
      //    the listener has to be separate from the actual function!
        showAnswers();
      }
    );


    // - - - - - - - -  FUNCTIONS - - - - - - - -
    function cSideValidate() {
      alert('in cSideValidate');
     document.getElementById('errMsg').innerHTML = 
       'Still working - please wait for final message';
    }
    
    function clearReset() {    
      alert('in clearReset()');
       
      //  document.getElementById('errMsg').innerHTML = 'All fields are STILL required';  // output field
      //  document.getElementById("errMsg").style.font-weight = "normal"; 

      document.getElementById('q1').selectedIndex = 0;
      document.getElementById('q1').style.backgroundColor = '#e6f8fa';
    }

    </script>
</body>
</html>

我的代码要复杂得多，但我已经隔离了这个故障？！？！？我真的需要一种方法来调试附加到 Google 文档的 HTML 中的 Javascript。

运行 HTML 的代码：

function launchMinHtml() {

  var html = HtmlService
    .createTemplateFromFile('minHtml') 
    .evaluate();
  
//  SpreadsheetApp.getUi().alert('about to show html');
  SpreadsheetApp.getUi().showModalDialog(html, ' ');
}

onLoad 函数中的电子表格菜单：

function onOpen(e) {
    SpreadsheetApp.getUi()   // Or DocumentApp or SlidesApp or FormApp.
      .createMenu('Dialog')
      .addItem('Open Form 1', 'openForm1')
      .addItem('Minimun HTML', 'launchMinHtml')
      .addItem('Select Color Change', 'launchSelectColorChg')
      .addItem('Dynamic Select', 'launchDynamicSelect')
      .addToUi();

}

标签： javascripthtmlgoogle-apps-script

javascript - 添加 getElementById 语句后，警报在 Javascript 中停止工作

问题描述

解决方案

推荐阅读