时间戳

首页 > 解决方案 > HTML 按钮不显示弹出窗口

javascript - HTML 按钮不显示弹出窗口

问题描述

我有一个 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

标签： javascripthtml

解决方案

解决方案是删除控制台日志。这就是最后一个按钮的所有内容。

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

因为它得到了 NULL 响应。

推荐阅读