Question

在我的html5 Web应用程序中，我在加载DOM时设置了一些html元素的值。使用的值来自一些Javascript全局变量，这些变量在DOM加载开始之后但在添加相应的html DOM元素之前确定。现在我的代码看起来像：

 myBtnText="some value";
 //....

 <input type="button" id="myBtn" onclick="DoSomeAction();" />
 <script type="text/javascript">
     document.getElementById("myBtn").value = myBtnText;
 </script>

代码正在运行，但我想改进它，以避免document.getElementById（“myBtn”）的调用，并使代码更小。我正在考虑简化它做类似的事情：

<input type="button" id="myBtn" value=/*<myBtnText>*/ onclick="DoSomeAction();" />

其中/ /将是一个表达式，可以帮助获取myBtnText全局变量的值。

有任何想法，如果这是可能的，以及如何做到这一点？

Answer 1

如果您使用了JQuery，则可以通过执行以下操作来避免对document.getElementById的调用：

$('#myBtn').val();

获取字段的值并：

$('#myBtn').val("something");

设置它的值。您可以在这里了解更多信息：

http://api.jquery.com/val/

Answer 2

为什么在DOM准备好之前设置按钮值？这是在解析页面时执行此操作的一种方法。

myBtnText="some value";
 //....
/* some HTML */

    <SCRIPT>
    document.write('<input type="button" id="myBtn" onclick="DoSomeAction();" value="'+myBtnText+'"/>');
    </SCRIPT>

/* more HTML */

Answer 3

哇，什么？这看起来像一个糟糕的语法。您是否尝试在HTML中重新发明perl？你会完全破坏任何解析器！

由于您尝试解决的问题似乎是代码量，为什么不专注于将代码缩减到适当的函数，例如：

<script>
function setValue(id, value) {
   document.getElementById(id).value = value;
}
</script>

在“运行时”设置html元素值

3 个答案: