javascript - 使用 Javascript 更改按钮标签

Question

我有一个提交按钮，我在“创建”和“更新”之间共享。根据我的页面状态，我需要以下标签:

• 创建 = 提交
• 更新=更新

这些按钮的前面也有一个使用 glyphicon 的图像，但两个按钮的图像是相同的。

为了获得我的页面状态(上面列出的)，我有相关按钮调用的其他 JavaScript 函数。

我所有的代码都在下面。我很挣扎，因为我对 JavaScript 还很陌生，现在我可以通过使用 Value 添加来做到这一点，但由于我的形象，这不起作用。

编辑按钮 HTML

<button type="button"class="btn btn-default" name="RegCashMove_Edit_Button" onclick='RegCashMoveEdit()'>
     <span class="glyphicon glyphicon-pencil" title="Edit" style="vertical-align: middle"></span>
</button>

创建按钮 HTML

<button type="button" class="btn btn-default" name="RegCashMove_Create_Button" onclick='RegCashMoveCreate()'>
     <span class="glyphicon glyphicon-plus"></span> Create
</button>

可变按钮 HTML

这是我希望标签可变的按钮。目前它的“提交”

<button name="RegularCashMovements_Submit_Button" class="btn btn-default" id="RegularCashMovements_Submit_Button" type="submit">
     <span class="glyphicon glyphicon-ok"></span> Submit
</button>

“创建”按钮的 JavaScript 函数

function RegCashMoveCreate(txt) {
    document.getElementById('selection').value = "Create";
    document.getElementById('index').value = "";
    document.getElementById('RCMViewState').value = "Initial";

    document.getElementById('submitAndCancel').style.display = "block";
    document.getElementById('editAndConfirm').style.display = "none";
    document.getElementById('yesAndNo').style.display = "none";
    document.getElementById('confirmTemplate').style.display = "none";
    document.getElementById('createEditDeleteTopLine').style.display = "block";
    document.getElementById('RegCashMoveHeading').innerHTML = "<h3>" + txt + "</h3>";
    document.getElementById('RegCashMoveFields').style.display = "block";
    document.getElementById('RegCashMoveDeleteConfirmation').style.display = "none";

    document.getElementById('FromDiv').innerHTML = "<%=fromInnerHtml%>";
    document.getElementById('ToDiv').innerHTML = "<%=toInnerHtml%>";
    document.getElementById('AmountDiv').innerHTML = "<%=amountInnerHtml%>";
    document.getElementById('FrequencyDiv').innerHTML = "<%=frequencyInnerHtml%>";
    document.getElementById('FromErrorDiv').innerHTML = "";
    document.getElementById('ToErrorDiv').innerHTML = "";
    document.getElementById('AmountErrorDiv').innerHTML = "";
    document.getElementById('FrequencyErrorDiv').innerHTML = "";

    document.getElementById('RegCashMove_From_DropDownList').value = "- - Please select - -";
    document.getElementById('RegCashMove_To_DropDownList').value = "- - Please select - -";
    document.getElementById('RegCashMove_Amount_TextBox').value = "";
    document.getElementById('RegCashMove_Frequency_DropDownList').value = "0";
};

“编辑”按钮的 JavaScript 函数

function RegCashMoveEdit(txt, from, to, amount, frequency, index) {
    document.getElementById('selection').value = "Edit"
    document.getElementById('index').value = index;
    document.getElementById('RCMViewState').value = "Initial";

    document.getElementById('submitAndCancel').style.display = "block";
    document.getElementById('editAndConfirm').style.display = "none";
    document.getElementById('yesAndNo').style.display = "none";
    document.getElementById('confirmTemplate').style.display = "none";
    document.getElementById('createEditDeleteTopLine').style.display = "block";
    document.getElementById('RegCashMoveHeading').innerHTML = "<h3>" + txt + "</h3>";
    document.getElementById('RegCashMoveFields').style.display = "block";
    document.getElementById('RegCashMoveDeleteConfirmation').style.display = "none";

    document.getElementById('FromDiv').innerHTML = "<%=fromInnerHtml%>";
    document.getElementById('ToDiv').innerHTML = "<%=toInnerHtml%>";
    document.getElementById('AmountDiv').innerHTML = "<%=amountInnerHtml%>";
    document.getElementById('FrequencyDiv').innerHTML = "<%=frequencyInnerHtml%>";
    document.getElementById('FromErrorDiv').innerHTML = "";
    document.getElementById('ToErrorDiv').innerHTML = "";
    document.getElementById('AmountErrorDiv').innerHTML = "";
    document.getElementById('FrequencyErrorDiv').innerHTML = "";

    document.getElementById('RegCashMove_From_DropDownList').value = from;
    document.getElementById('RegCashMove_To_DropDownList').value = to;
    document.getElementById('RegCashMove_Amount_TextBox').value = amount;
    document.getElementById('RegCashMove_Frequency_DropDownList').value = frequency;
};

我不，我应该能够在我的每个 JavaScript 函数中添加一个变量来显示相关标签，但我的问题是用我的图像将它放在按钮上

Answer 1

您可以使用“textContent”属性(IE < 9 中的“innerText”)设置 HTML 元素的文本内容:

var button = document.getElementById('RegularCashMovements');
button.innerText = button.textContent = 'new text';

不应删除按钮元素内的 span 元素。如果您还想更改跨度的标题，请这样做:

for (var index = 0; index < button.childNodes.length; index++) {
    if (button.childNodes[index].tagName == 'SPAN') {
        button.childNodes[index].title = 'new title';
        break;
    }
}

您需要遍历按钮的所有子节点，而不是取第一个，因为这样您将再次获得按钮的文本内容。

希望我理解你的问题。我还必须说，由于所有“显示:无；”，您的 javascript 非常程序化且性能不佳。和 innerHTML 访问。我给你的建议是更客观地思考，将你需要隐藏的所有元素放在一个容器元素中，然后隐藏那个元素。