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 之后。）

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

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

Javascript not able to enable button due to condition

javascript

html

javascript-events