使用 javascript 设置按钮的值答案

【问题标题】：Setting a button's value using javascript使用 javascript 设置按钮的值
【发布时间】：2012-01-22 10:36:48
【问题描述】：

我确定看到答案后我会觉得自己很愚蠢，但我一直在网络上遇到史前代码，我不确定这些代码是否仍然适用。我的问题是“如何使用 javascript 更改按钮（在表单内）的值？”这是我现在拥有的：

function myFunc(form) {
    form.elements["submit-button"].value = "New<br>Text";
    "other stuff that actually works."
    return false;
}

紧随其后

<form onSubmit="return myFunc(this);">
    <button name="submit-button">Original<br>Text</button>
</form>

“其他真正有效的东西”。实际上有效，所以我确定该函数被调用并且按钮被找到。我似乎无法将“New
Text”粘贴到按钮中！

非常感谢您的帮助。

【问题讨论】：

标签： javascript html button

【解决方案1】：

您的代码有效，但未达到您的预期。您后面的显示按钮的文本及其初始值，但是您的代码将在提交表单之前更改该值。这意味着，接收页面（通常是 php/perl/asp 脚本）将看到更改后的值作为 GET 或 POST 参数传递。

如果你想在不提交表单的情况下更改文本，你可能想试试这个：

function changeValue(id, newText) {
    var el       = document.getElementById(id);
    el.value     = newText;  // change the value passed to the next page
    el.innerHTML = newText;  // change the displayed text on the screen
    return false;
}

<form onsubmit="return false;">
    <button  id="submit-button" 
           name="submit-button" 
        onclick="changeValue(this.id,'Some New Text');" >Original<br>Text</button>
</form>

see JS Fiddle here

【讨论】：

【解决方案2】：

使用innerHTML 而不是value。

form.elements["submit-button"].innerHTML = ...

因为您使用的是<button> 而不是<input type="button">，所以您需要设置innerHTML。 <button>s 的文本不基于 value 属性。

<button> innerHTML </button>
<input type="button" value="value" />

【讨论】：

我认为默认值是由初始文本设置的，但是如果通过其他方式（例如 JavaScript）进行更改，按钮确实会传递 value
根据MDN website，在插入纯文本时，建议使用textContent，因为innerHTML存在安全隐患，会不必要地将内容解析为HTML。跨度>

【解决方案3】：

有一个更好的方法来做到这一点。使用 document.getElementById 并给按钮一个 ID。

function myFunc() {
    document.getElementById('my_button').innerHTML = "New<br>Text";
    //"other stuff that actually works."
    return false;
}

<form onSubmit="return myFunc();">
    <button id="my_button" name="submit-button">Original<br>Text</button>
</form>

我不确定您是否可以将标签放入按钮的值中，但谁知道呢。不能说我试过了。

【讨论】：

【解决方案4】：

这可能有效：

form.elements["submit-button"][0].innerHTML = "New<br>Text";

form.elements["submit-button"] 可能返回具有name 属性的所有元素，这是一个数组。

【讨论】：