將變量傳遞給 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>