Изменить ярлык кнопки, используя Javascript

Question

У меня есть кнопка отправки, которую я разделяю между 'Create' и 'Update'. Я хочу, чтобы следующие метки в зависимости от моей страницы состояния:

• Создать = Отправить
• Update = Обновить

Эти кнопки также есть изображение на фронте их помощью 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> 

Variable Кнопка 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 функция для кнопки 'Edit' не

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 для отображения соответствующей метки, но моя проблема - gett ING его на кнопку с моим изображением

Answer 1

Вы можете установить текстовое содержимое HTML-элемента со свойством «TextContent» («InnerText» в IE < 9):

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

Пролет элемент внутри элемент кнопки не должен удаляться. Если вы хотите изменить название пролета это сделать так:

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

Вам необходимо перебрать все дочерние узлы кнопки, вместо того, чтобы брать первую, потому что, чем вы получите текст содержимое кнопки снова.

Надеюсь, я понял вашу проблему. Я также должен сказать, что ваш javascript очень процедурный и неэффективный из-за всего «отображения: нет»; и innerHTML доступа. Мой совет для вас был бы более объективным и поместить все элементы, которые вам нужно скрыть в одном элементе контейнера, и скрыть его.