简体   繁体   English

返回JS函数的值并将其用作输入按钮的值

[英]Return the value of a JS function and use it as the value for an input button

I want to set a JavaScript function which returns a string, and that string to be used as a value for a button. 我想设置一个返回字符串的JavaScript函数,该字符串用作按钮的值。 Something like this: 像这样的东西:

function test(){
 x = "some text";
 return x;
}

I want to use this function in a input element in the value attribute. 我想在value属性的input元素中使用此函数。 Something like this: 像这样的东西:

<input type="button" id="s1" value="test()" />

Unfortunatly the button doesn't show "some text" but "test()" on the button. 不幸的是,按钮不会在按钮上显示“某些文本”,而是“test()”。 How can i fix this? 我怎样才能解决这个问题?

you could do: 你可以这样做:

<input type="button" id="s1" value="" />
<script type="text/javascript">
 var elem = document.getElementById("s1");
 elem.value = "some text";
</script>

You can also do it in an elegant way by using custom data attributes. 您还可以使用自定义数据属性以优雅的方式执行此操作。

See a JSFiddle demo here: http://jsfiddle.net/NJ5sK/ 在这里查看JSFiddle演示: http//jsfiddle.net/NJ5sK/

Basically, you mark your input elements with the name of the function that should be called to return its value. 基本上,您使用应调用的函数名称标记输入元素以返回其值。 Then you grab all the elements that have the data-value-function attribute, run the function and assign the value. 然后,您获取具有data-value-function属性的所有元素,运行该函数并分配该值。

HTML: HTML:

<input type="text" data-value-function="cheese" />
<input type="text" data-value-function="animal" />

JS: JS:

window.cheese = function() {
    return "Limburger";
}

window.animal = function() {
    return "Cat";
}

var elements = document.querySelectorAll('*[data-value-function]');
for (var i = 0; i < elements.length; i++) {
    var valueFunctionName = elements[i].getAttribute('data-value-function');
    elements[i].value = window[valueFunctionName]();
}

Enjoy! 请享用!

The correct way to set the value of the button would be to use the HTML DOM, or a framework like JQuery. 设置按钮值的正确方法是使用HTML DOM或JQuery之类的框架。 This also has a JSBin Demo . 这也有一个JSBin演示

For example, 例如,

HTML - Runs function test when document loads. HTML - 文档加载时运行功能test

<body onload = "test()">
  <input type="button" id="s1" value="" />
</body>

JavaScript - JavaScript -

function test(){
 x = "some text";
 document.getElementById("s1").value =x;
}

View JSBin Demo 查看JSBin演示

value attribute for html button accepts only text. html按钮的value属性仅接受文本。 see here . 看到这里

What I understand from your question is you want a html button whose value should be set by a javascript function. 我从你的问题中理解的是你想要一个html按钮,其值应该由javascript函数设置。 you can achieve this the other way around. 你可以通过其他方式实现这一目标。

Get button element using document.getElementById and set the value inside the test() 使用document.getElementById获取button元素并在test()设置value

you code should looks like this: 你的代码应该是这样的:

<input type="button" id="s1"/>

<script>
   function test(){
      document.getElementById('s1').value ='some text'; //s1 is the id of html button
   };
   test(); //dont forget to call function
</script>
function test(){
    x = "some text";
    document.getElementById('s1').value = x;
}

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM