由于条件原因，JavaScript 无法启用按钮

Question

我下面有一个纯JS，它不起作用，因为它必须满足条件才能启用按钮。

它可以在 jsfiddle 上运行，但不能在代码中运行。 我删除了其他条件来测试问题所在。我在这里遗漏了什么吗？

JS:

<script type = "text/javascript">
var show = document.getElementById('show');
var button = document.getElementById('sub1');

var conditions = {
  cond3: false
};

function setCondition3(e) {
  conditions.cond3 = e.target.value && e.target.value.length > 0;
  enableButton(conditions);
}

function enableButton(options) {
  if (options.cond3) {
    button.removeAttribute('disabled');
  } else {
    button.setAttribute('disabled', true);
  }
}

show.addEventListener('change', setCondition3, false);
</script>

HTML:

<section id="placeOrder">
            <h2>Place order</h2>
            Your details
            Customer Type: <select id="show" name="customerType" onchange="change(this)">
                <option value="">Customer Type?</option>
                <option value="ret">Customer</option>
                <option value="trd">Trade</option>
            </select>

<p><input type="submit" name="submit" value="Order now!" id="sub1" disabled="disabled"/></p>

Answer 1

It's able to work on jsfiddle but just not in codes

这几乎总是意味着您试图在元素存在之前访问该元素，因为 jsFiddle 的(令人难以置信的令人惊讶)默认设置是将所有 JavaScript 包装在它分配给 window.onload 的函数中，这意味着它直到页面加载过程的最后阶段才会运行。

将您的 script 标记放在它们引用的 HTML 下方。通常，除非您有充分的理由要做其他事情，否则最好将脚本放在最后，即结束 </body> 标记之前。

这是您的代码，正在运行，元素的 HTML 之后有 script:

<section id="placeOrder">
  <h2>Place order</h2>
  Your details Customer Type:
  <select id="show" name="customerType">
    <option value="">Customer Type?</option>
    <option value="ret">Customer</option>
    <option value="trd">Trade</option>
  </select>

  <p>
    <input type="submit" name="submit" value="Order now!" id="sub1" disabled="disabled" />
  </p>
</section>
<script>
var show = document.getElementById('show');
var button = document.getElementById('sub1');

var conditions = {
  cond3: false
};

function setCondition3(e) {
  conditions.cond3 = e.target.value && e.target.value.length > 0;
  enableButton(conditions);
}

function enableButton(options) {
  if (options.cond3) {
    button.removeAttribute('disabled');
  } else {
    button.setAttribute('disabled', true);
  }
}

show.addEventListener('change', setCondition3, false);
</script>

(我在上面使用了显式的 script 标记来强调，但如果我将 JavaScript 放在 Stack Snippet 的右侧框中，它也会起作用，因为 Stack Snippets 将代码放在 HTML 之后。)

请注意，我还从 onchange="change(this)" 标记中删除了 <select> ，因为您使用的是 addEventListener 。我还关闭了 <section> 标签。