[英]Javascript to pass a variable to HTML
I have this javascript in my html <script>
:我的 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>
And im trying to pass the reson
var to my HTML input
like this :我试图将
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=""/>
So when i click on a button, i get a prompt that ask for a "reason" and user is typing the reason , i want the input
to return this value.因此,当我单击一个按钮时,会收到一个提示,要求输入“原因”并且用户正在输入原因,我希望
input
返回此值。 it worked once and now it stopped.它工作过一次,现在它停止了。
How can i do this properly ?我怎样才能正确地做到这一点?
EDIT : full code update :编辑:完整代码更新:
<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>
Demo showing your problem:演示显示您的问题:
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"/>
What about using particular form ?使用特定形式怎么样?
There should be 2 options应该有2个选项
use DOM to find element near (may be broken when page structure changes or in different browser)使用 DOM 查找附近的元素(页面结构改变或在不同浏览器中可能会损坏)
send form as parameter and find your input on its form as it is common for button and input ?将表单作为参数发送并在其表单上找到您的输入,因为按钮和输入很常见?
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.