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

【问题标题】：Alerts stop working in Javascript after added getElementById statements添加 getElementById 语句后，警报在 Javascript 中停止工作
【发布时间】：2020-12-21 06:17:34
【问题描述】：

我正在尝试调试绑定到 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();

}

【问题讨论】：

JavaScript 中的标识符不能包含破折号（它将被视为减法）。使用style.fontWeight。
默认情况下，Google Apps 脚本记录器、项目执行页面或堆栈驱动程序不会显示客户端错误，但它们可能是我在网络浏览器控制台中登录的。
缺少打开模态对话框的服务器端代码。
@Ivar errMsg 不包含破折号。
只需打开 Chrome DevTools，即按 F12

标签： javascript html google-apps-script

【解决方案1】：

为了扩展上述 cmets，您的代码中似乎存在语法错误，导致代码停止执行。在浏览器中检查您的 Web 控制台，它应该引用该行，它在哪里停止。您的第二行应如下所示：

  document.getElementById("errMsg").style.fontWeight = "normal";

【讨论】：

感谢您的明确帮助。我需要学习放慢速度并逐行添加我的代码，因为在这种情况下（我所知道的）对 javascript 没有洞察力
轻松，先生，这是一条漫长的道路，但值得！我去过那里，把头发扯下来，我肯定会再来的：）没问题。