Javascript ES6: невозможно изменить значение кнопки с помощью ajax (с остальной частью кода js, работающей нормально)

Question

Моя кнопка:

<input type="submit" name="commit" value="Update Talk" class="btn btn-secondary" id="update-tlk" data-disable-with="Update Taaalk">

Что находится в моем обновлении. js файл:

const btn = document.querySelector('#update-tlk');
btn.value = "Updated";
btn.style = "background: red";
console.log(btn.value)

Это код в моем обновлении. js .erb файл и Стиль кнопки устанавливается на красный, и консоль выводит «Обновлено», однако моя кнопка по-прежнему имеет текст «Обновление разговора», который я хочу изменить на «Обновлено».

Если я запускаю

btn.value = "blaaa"

в консоли, тогда видимый текст на кнопке изменится на "blaaa".

Мой ajax код:

  def update
    if @spkr.user == current_user
      @spkr.update(spkr_params)
      complete_user_profile
      respond_to do |format|
        format.js # { @tlk }# <-- will render `app/views/reviews/create.js.erb`
        # format.html { redirect_to new_tlk_path(@tlk) } THIS LINE IS COMMENTED OUT!
      end
    else
      spkr_edited
      send_spkr_edited_mail
    end
  end

Я пробовал .innerText и .inner HTML и ни одна из них не работает.

Я использую Ruby на Rails 6.

Answer 1

Полагаю, проблема в том, что вы используете функцию "disable_with".

1. вы отправляете форму
2. rails сохраняет текущее значение "Update Talk"
3. rails изменяет значение на «Обновить Taaalk» (из вашего атрибута data-disable-with)
4. вы отвечаете некоторым js, который изменяет значение на «Обновленный»
5. rails отменяет «отключить» означает установку старого значения «Обновление разговора»

Лично я бы не изменил значение кнопки (так как она все равно будет активна, и она снова отправит форму). Я думаю, что лучше спрятать кнопку и добавить сообщение "Обновлено" в качестве другого элемента.