使用 javascript 设置按钮的值

IT技术 javascript html button
2021-02-27 03:44:40

我确定看到答案后我会觉得自己很愚蠢,但是我一直在网络上遇到史前代码,我不确定这些代码是否仍然适用。我的问题是“如何使用 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>

“其他真正有效的东西”。实际工作,所以我确定函数被调用并且按钮被找到。我似乎无法将“新
文本”粘贴到按钮中!

非常感谢帮助。

4个回答

使用innerHTML代替value

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

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

<button> innerHTML </button>
<input type="button" value="value" />
根据MDN 网站,在插入纯文本时,建议使用textContent,因为innerHTML存在安全风险,并且会将内容不必要地解析为 HTML。
2021-04-25 03:44:40
我认为默认值是由初始文本设置的,但是value如果通过其他方式(例如 JavaScript)更改了按钮,则它会传递
2021-05-10 03:44:40

您的代码有效,但没有按照您的预期运行。您的后跟显示按钮的文本及其初始值,但是您的代码将在提交表单之前更改该值。这意味着,接收页面(通常是 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>

在此处查看 JS Fiddle

这可能有效:

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

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

有更好的方法来做到这一点。使用 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>

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