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

它能够在jsfiddle上工作，但不能在代码中工作

这几乎总意味着你在它存在之前尝试访问该元素，因为jsFiddle的（令人难以置信的惊人）默认设置是将所有JavaScript包装在一个它分配给public void Configuration(IAppBuilder app) { config = new HttpConfiguration(); config.MapHttpAttributeRoutes(); config.EnableCors(); config.Routes.MapHttpRoute( name: "DefaultApi", routeTemplate: "api/{controller}/{id}", defaults: new { id = RouteParameter.Optional } ); config.SuppressDefaultHostAuthentication(); config.Filters.Add(new HostAuthenticationFilter(OAuthDefaults.AuthenticationType)); var kernel = ConfigureNinject(app); ConfigureOAuth(app, kernel); config.DependencyResolver = new NinjectResolver(kernel); //app.UseWebApi(config); app.UseNinjectMiddleware(() => kernel); app.UseNinjectWebApi(config); AreaRegistration.RegisterAllAreas(); GlobalConfiguration.Configure(WebApiConfig.Register); FilterConfig.RegisterGlobalFilters(GlobalFilters.Filters); RouteConfig.RegisterRoutes(RouteTable.Routes); BundleConfig.RegisterBundles(BundleTable.Bundles); AutoMapperConfiguration.Configure(); } public void ConfigureOAuth(IAppBuilder app, IKernel kernel) { app.UseOAuthBearerTokens(kernel.Get<IOAuthAuthorizationServerOptions>().GetOptions()); }的函数，这意味着它不会在页面加载过程中很晚才运行。

将window.onload标记放在所引用的HTML下面。通常，除非您有充分的理由做其他事情，否则最好将您的脚本放在最后，就在结束script标记之前。

这是您的代码，使用</body>之后的元素的HTML代码：

＆＃13;

script

＆＃13;

（我在上面使用了一个明确的<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>标记来强调，但是如果我将JavaScript放在Stack Snippet的右侧框中，那么它也可以工作，因为Stack Snippets放了HTML之后的代码。）

请注意，我还从script代码中删除了onchange="change(this)"，因为您正在使用<select>。我还关闭了addEventListener代码。

由于条件，Javascript无法启用按钮

1 个答案: