jsfiddle identical(?) fiddles with button to change text 一个工作一个不

Question

HTML:-

<h1 id="title">Javascript example no.2</h1>
<input type="text" id="myTextField"/>
<input type="submit" id="byBtn" value="Change" onclick="F_change()"/>

JAVASCRIPT:-

function change() {

  var myNewTitle = document.getElementById('myTextField').value;
  if (myNewTitle.length == 0) {
    alert('Write Some real Text please.');
    return;
  }

  var title = document.getElementById('title');
  title.innerHTML = myNewTitle;

}

当用户在文本字段中输入文本并单击按钮时，新文本将替换标题文本。

这个jsfiddle works OK (thanks to Emad Elsaid: https://jsfiddle.net/user/blazeeboy/fiddles/).

这个jsfiddle不行。

这让我很生气，请帮忙。

更新

我应该发现函数名称中明显的不匹配（F_Change 与更改）。

对我来说最重要的一课是设置 jsfiddle...javascript...加载类型

来自 "on load"

到"no wrap - in ".

感谢所有响应者。

Answer 1

onclick 函数名称不同，F_change() 与函数名称不匹配

Answer 2

改变这个：

function change() {

对此：

function F_change() {

然后将 Javascript -> Load Type 更改为 "No Wrap - in <head>"

Answer 3

将代码更改为：

<html>
<body>
<h1 id="title">Javascript example no.2</h1>
<input type="text" id="myTextField"/>
<input type="submit" id="byBtn" value="Change" onclick="F_change()"/>
<script>
function F_change() {
  var myNewTitle = document.getElementById('myTextField').value;
  if (myNewTitle.length == 0) {
    alert('Write Some real Text please.');
    return false;
  }
    var title = document.getElementById('title');
  title.innerHTML = myNewTitle;
}
</script>

</body>
</html>

Answer 4

在 HTML 中，Onclick 是 F_change() 但在 javascript 中，他们调用了 change()。因此 onclick 和函数名称不同。

所以我们可以使用与函数名相同的名称

我们可以使用 onclick="F_change()" 函数 F_Change() 或 onclick="change()" 函数 Change()

Answer 5

问题是由 Javascript 加载到 HTML 的方式引起的。在工作的 JSFiddle 中，脚本在脚本被放置在文档的 head 时加载，而在另一个 JSFiddle 中，脚本被放置在文档触发 [ 时调用的函数的主体中=13=] 事件。这些加载脚本的方法在 JSFiddle 中分别命名为 "no wrap" 和 "onLoad"。只需比较下面 HTML 代码的两个片段，它们取自您在问题中链接到的 JSFiddle 页面。

有效的 JSFiddle：

<script type='text/javascript'>//<![CDATA[

    function change(){

        ...

    }

//]]> 

</script>

不起作用的 JSFiddle：

<script type='text/javascript'>//<![CDATA[
    window.onload=function(){
        //... *** LINKED ON STACK EXCHANGE - DO NOT UPDATE, FORK INSTEAD ***

        function change() {

            ...

        }

    }//]]> 

</script>

因为 change 函数是在 window.onload 回调函数的范围内定义的，所以在该函数外部定义的 Javascript 是不可见的。因此，您不能从内联 Javascript 中调用它。无需更改函数名称，只需将 Load Type（位于齿轮图标下方）更改为 "no wrap"，一切正常。

jsfiddle identical(?) fiddles with button to change text 一个工作一个不

jsfiddle identical(?) fiddles with button to change text one works one does not

html

javascript

jsfiddle