Javascript启用按钮在JSFiddle中工作，但在浏览器Flas中不工作

Question

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

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

例如，在JSFiddle中，类似这样的工作方式：

JSFiddle

但是，如果在我的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 %}

其中recordtest.js是：

startRecord.disabled = false;
stopRecord.disabled = true;
submitRecord.disabled = true;

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

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

我用的是Chrome

Answer 1

在js文件中的一个自动执行的javascript闭包中放入以下行，如下所示

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

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

另外，在script标记中输入type=“text/javascript”以保持整洁

Answer 2

首先在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脚本文件是否正确链接，这可能就是原因所在