Javascript启用按钮在JSFIDLE中工作，但在browser-Flask中不工作

我正在使用Python/Flask开发一个web应用程序

在页面中，我想先禁用一些按钮，然后在调用函数时启用

例如，在JSFIDLE中，类似这样的方法可以工作：

但是，如果在我的

index.html

文件中有如下内容：

{%- extends "base.html" %}

{% import "bootstrap/utils.html" as utils %}

{% block content %}

  <h1>Three buttons!</h1>
  <div id="audio">
    <p>
      <button id=startRecord onclick="startRecording()">Start</button>
      <button id=stopRecord onclick="stopRecording()">Stop</button>
      <button id=submitRecord onclick="submit()">Submit</button>
    </p>
    <p>
      <audio id=recordedAudio></audio>
    </p>
    <p>
      <a id=audioDownload></a>
    </p>
  </div>

{% endblock %}

{% block scripts %}
  <script src="{{url_for('static', filename='js/recordtest.js')}}"></script>
{% endblock %}

所有按钮均以启用状态启动，且不会随功能更改

---

我正在使用Chrome。

首先在startRecording函数中添加一个警报，以确认它实际上正在被调用，请尝试以下代码

document.getElementById("startRecord").disabled = false;
document.getElementById("stopRecord").disabled = true;
document.getElementById("stopRecord").style.backgroundColor = '#aaa'; // or any color you need to make it look like its hidden
document.getElementById("submitRecord").disabled = true;
document.getElementById("submitRecord").style.backgroundColor = '#aaa'; // or any color you need to make it look like its hidden

function startRecording() {
  alert();
  document.getElementById("stopRecord").disabled = false;
  document.getElementById("stopRecord").style.backgroundColor = '#FFF'; // or any color you need to make it look like its not hidden
}

---

还要验证您的java脚本文件是否正确链接，这可能是将js文件中的以下行放入自动执行javascript闭包的原因，如下面所述

$(function(){
    startRecord.disabled = false;
    stopRecord.disabled = true;
    submitRecord.disabled = true;

    function startRecording() {
      stopRecord.disabled = false;
    } 
})();

---

另外，为了整洁起见，将type=“text/javascript”放在脚本标记中。

如果这是浏览器中

index.html

的内容，那么它将不会处理这个

src=“{url\u for（'static'，filename='js/recordtest.js'）}”

，而是照字面理解，加载url时失败。您是否检查了开发工具中的“网络”选项卡上的脚本？这是可行的，但由于某些原因，禁用的按钮不可单击，但也不是灰色的（清楚地显示为禁用），这也是需要的。我该怎么做呢？你可以添加额外的JavaScript来改变隐藏按钮的背景色，这样做没有坏处。我编辑了我的代码来展示如何做到这一点

$(function(){
    startRecord.disabled = false;
    stopRecord.disabled = true;
    submitRecord.disabled = true;

    function startRecording() {
      stopRecord.disabled = false;
    } 
})();