JsFiddle Javascript 没有触发？

Question

我有一种强烈的感觉，我只是在这里犯了傻，但是是我还是 Js 没有在 JsFiddle 中开火？

我在这里构建了这个片段，但似乎无法启动它。我可能遗漏了一些非常明显的东西，但如果有任何帮助，我将不胜感激。

HTML

  <div id="col">

    <h3 class="txt spacer">Dynamic input, based on select value...</h3>
    <input type="text" name="field-one" class="txt stretch" />

    <div class="boxes">
      <input type="checkbox" id="box-2" onChange="myFunction()" checked>
      <label for="box-2">Apply a name?</label>
    </div>
  </div>
</div>

Javascript

function myFunction() {
  // Text field element.
  var a = document.getElementByName('field-one');
  // Checkbox element.
  var b = document.getElementById('box-2');

  if (b.checked) {
    a.disabled = false;
    a.placeholder = 'Not Applicable';
    alert('Checkbox State Changed.');
  } else {
    a.disabled = true;
    a.placeholder = 'Enter Your Full Name';
    alert('Checkbox State Changed.');
  }
}

JS FIDDLE

在此先感谢您的帮助。

此致，

-乙。

编辑

I'm an idiot. Thanks guys.

Answer 1

这里有一些东西，它应该是 document.getElementsByTagName（复数）并且您需要更改设置，这将在正文关闭之前嵌入 JS 代码。

var a = document.getElementsByName('field-one')[0];

我在这里使用 [0] 来访问数组的第一个元素，因为如果遇到多个匹配元素，document.getElementsByName() 将 return 给你一个元素数组。如果您想 select 一个特定的元素，请确保以更具体的方式 select DOM 元素。

并将加载类型更改为

No wrap - in <body> (<head> will work as well)

Demo

Answer 2

打开 DevTools，您会看到

Uncaught ReferenceError: myFunction is not defined
    at HTMLInputElement.onchange ((index):192)

为什么函数没有定义？也许它没有在正确的位置定义？

查看您加载 JavaScript 的位置并将其更改为：

这是一个 updated fiddle。请注意，我修正了第 3 行的错字 getElementsByName.

Answer 3

您的 jsFiddle 的 Javascript 加载类型设置为 onLoad。这将嵌套您的 myFunction 函数，因此在全局范围内不可用。

您可以更改加载类型，或在 window:

上设置变量

window.myFunction = function()....

注意：然后您会收到 getElementByName 的另一个错误。这不是 document 的函数。您可能正在寻找 getElementsByName.

Answer 4

首先，将 seeting of javascript LOAD TYPE 设置为 head。

最后是 getElementsByName 而不是 getElementByName 并且它是 return 数组，因此您需要解析。

let a = document.getElementsByName('field-one')[0];

希望对您有所帮助。

JsFiddle Javascript 没有触发？

JsFiddle Javascript not firing?

javascript

jsfiddle