JavaScript ES6 : unable to change value of button with ajax (with the rest of the js code working fine)

Question

我的按钮:

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

我的 update.js 文件中有什么:

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

这是我的 update.js.erb 文件中的代码，按钮样式设置为红色，控制台输出“Updated”，但是我的按钮仍然设置为文本“Update Talk”，这是我想要的更改为“已更新”。

如果我运行

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 和 .innerHTML 但都不起作用。

我正在使用 Ruby on Rails 6。

Answer 1

我猜问题是您正在使用的“disable_with”功能。

1. 您提交表单
2. rails 保存当前值“Update Talk”
3. rails 将值更改为“Update Taaalk”(来自您的 data-disable-with 属性)
4. 您使用一些 js 进行响应，将值更改为“已更新”
5. rails 恢复“禁用”状态，设置旧值“Update Talk”

就我个人而言，我不会更改按钮的值(因为它仍然可以单击并且会再次提交表单)。我认为最好隐藏按钮并将“已更新”消息添加为另一个元素。