Javascript将变量传递给HTML

我的html

中有此javascript：

<script>
function myFunction() {
  var txt;
  var reason = prompt("Please enter reason:");
  if (reason == null || reason == "") {
    txt = "User cancelled the prompt.";
  } else {
    txt = reason ;
  }
  document.getElementById("myField").value = txt;
  return txt
}
</script>

因此，当我点击一个按钮时，我会得到一个提示，询问“原因”，用户正在键入原因，我希望

输入返回这个值。它工作过一次，现在停止了

我怎样才能正确地做到这一点

编辑：
完整代码更新：

<ul>
<h2 style="font-family:verdana; text-align:center; font-size:200%;">Support</h2>
    {% for zone in zones %}
            <p style="font-family:courier; font-size:120%;"><strong><ins>"{{ zone }}" </ins></strong></p>
            {% for thing in value %}
            <form target="_blank" method="get" action="connection" style="display: inline;">
                    <input type=hidden name="client" value="{{ thing['client'] }}">             
                    {% if thing['zone'] == zone %}
                            {% if thing['ttl'] %}
                                    <button class="button button" onclick="myFunction()"> <span class="blink"> {{button_name }}  </span> </button>
                                    <input type="hidden" name="reason" id="myField" value=""/>

                    {% endif %}
               {% endif %}

           </form>

    {% endfor %}
{% endfor %}

</ul>

使用特定的表单怎么样

应该有两种选择


使用DOM查找附近的元素（当页面结构更改或在不同浏览器中时可能会断开）

将表单作为参数发送，并在表单上查找您的输入，因为按钮和输入是常见的



函数myFunction（frm）{
var-txt；
console.log（frm.reason.value）；//第一个选项
console.log（event.srcmelement.parentElement.nextElementSibling.outerHTML）//第二个选项
var reason=提示（“请输入原因：”）；
如果（原因==null | |原因==“”）{
txt=“用户取消了提示。”；
}否则{
txt=原因；
}
frm.reason.value=txt；//第一个选项
console.log（event.srcmelement.parentElement.nextElementSibling.value==txt）；//第二个选项
返回文本
}

按钮1
按钮2
我刚刚在本地试用过，效果不错。可能有其他函数正在冲突/覆盖输入值。为什么要将输入类型设为隐藏？我正在将其传递给python代码，因此需要将其隐藏@PrakashReddyPotlapadu@SergiiVorobei我将再次检查：\n在
提示符中输入的内容已正确存储在input中。那怎么了
alert（document.getElementById（“myField”）.value）
正在给我在“提示”中输入的值，即：event.srcmelement->button，event.srcmelement.parentElement->form，event.srcmelement.nextElementSibling->input，您也可以将其传递给函数（button），而不是使用内部事件。我不能这样做，for循环构建了100多个按钮我无法单独构建每个按钮并添加其值，我需要动态的按钮
<ul>
<h2 style="font-family:verdana; text-align:center; font-size:200%;">Support</h2>
    {% for zone in zones %}
            <p style="font-family:courier; font-size:120%;"><strong><ins>"{{ zone }}" </ins></strong></p>
            {% for thing in value %}
            <form target="_blank" method="get" action="connection" style="display: inline;">
                    <input type=hidden name="client" value="{{ thing['client'] }}">             
                    {% if thing['zone'] == zone %}
                            {% if thing['ttl'] %}
                                    <button class="button button" onclick="myFunction()"> <span class="blink"> {{button_name }}  </span> </button>
                                    <input type="hidden" name="reason" id="myField" value=""/>

                    {% endif %}
               {% endif %}

           </form>

    {% endfor %}
{% endfor %}

</ul>