HTML 按钮不显示弹出窗口

Question

我有一个 HTML 页面，它从从 python 代码获取的列表中创建按钮。

list = ['a','b','c','d']它将构建按钮名称 abcd，4 个按钮。

我添加了一个脚本myFunction ，单击该脚本会弹出一个弹出窗口，以放置一些我发送到我的 python 代码的明文。 这一切都适用于列表中的所有按钮，除了最后一个按钮，我不知道为什么。

仅对于页面中创建的最后一个按钮不会显示弹出窗口并决定用户在明文上输入空响应。

代码：

<form target="_blank" method="get" action="connect" style="display: inline;">
        {% if thing['x'] %}
                <button class="button button" onclick="myFunction(form);openNav()"> {{ thing['letters'] }} </button>
                <input type="hidden" name="reason" id="myField" value=""/>
        {% endif %}
</form>    

function myFunction(frm) {
  var txt;
  console.log(frm.reason.value); // 1st option
  console.log(event.srcElement.parentElement.nextElementSibling.outerHTML) // 2nd option
  var reason = prompt("Please enter reason:");
  if (reason == null || reason == "") {
    txt = "CANCEL";
  } else {
    txt = reason;
  }
  frm.reason.value = txt; // 1st option
  console.log(event.srcElement.parentElement.nextElementSibling.value == txt); // 2nd option
  return txt
}

我在 F12 中看到的错误：

Authentication:271 Uncaught TypeError: Cannot read property 'outerHTML' of null
    at myFunction (Authentication:271)
    at HTMLButtonElement.onclick (Authentication:230)

我看到它在这一行给出了红色 X： console.log(event.srcElement.parentElement.nextElementSibling.outerHTML) // 2nd option

Answer 1

解决方案是删除控制台日志。 这就是为最后一个按钮放弃一切的原因。

  console.log(event.srcElement.parentElement.nextElementSibling.outerHTML) // 2nd option

因为它得到了 NULL 响应。