将变量传递给 HTML 的 Javascript

Question

我的 html <script>有这个 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>

我试图将reson var 传递给我的 HTML input如下所示：

<button class="button button" onclick="myFunction()"> <span class="blink"> {{button_name }}  </span> </button>
<input type="hidden" name="reason" id="myField" value=""/>

因此，当我单击一个按钮时，会收到一个提示，要求输入“原因”并且用户正在输入原因，我希望input返回此值。 它工作过一次，现在它停止了。

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

编辑：完整代码更新：

<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>

演示显示您的问题：

 console.log('Single (first) element of your ID - length:', document.getElementById("myField").length); console.log(document.getElementById("myField")); console.log('\\nCollection of elements named reason (printed in reversed order)'); var col = document.getElementsByName("reason"); console.log('- length:', col.length); for(var i=col.length;i;) { console.log(col[--i].outerHTML); }

 <input type="hidden" name="reason" id="myField" value="1"/> <input type="hidden" name="reason" id="myField" value="2"/> <input type="hidden" name="reason" id="myField" value="3"/> <input type="hidden" name="reason" id="myField" value="4"/> <input type="hidden" name="reason" id="myField" value="5"/> <input type="hidden" name="reason" id="myField" value="6"/>

Answer 1

使用特定形式怎么样？

应该有2个选项

• 使用 DOM 查找附近的元素（页面结构改变或在不同浏览器中可能会损坏）

• 将表单作为参数发送并在其表单上找到您的输入，因为按钮和输入很常见？

 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 = "User cancelled the prompt."; } else { txt = reason; } frm.reason.value = txt; // 1st option console.log(event.srcElement.parentElement.nextElementSibling.value == txt); // 2nd option return txt }

 <form target="_blank" method="get" action="connection" style="display: inline;"> <input type=hidden name="client" value="{{ thing['client'] }}"> <button class="button button" onclick="myFunction(form)"> <span class="blink">button_1</span></button> <input type="notHidden" name="reason" id="myField" value="1"/> </form> <form target="_blank" method="get" action="connection" style="display: inline;"> <input type=hidden name="client" value="{{ thing['client'] }}"> <button class="button button" onclick="myFunction(form)"> <span class="blink">button_2</span></button> <input type="notHidden" name="reason" id="myField" value="2"/> </form>