javascript - 为什么我的 JavaScript 代码在 jsfiddle 上显示不同的行为?

标签 javascript html

<分区>

我是 javaScript 的新手,这就是为什么我无法找到它的真正根本原因。 这个简单的代码是在每次按下按钮时将按钮的值附加到段落中;但是,如果该段落仅包含一个零,那么它应该替换该值,而不是追加。

  1. 这在我所有的浏览器上都运行良好,在 stackoverflow 上运行代码段时也是如此。
  2. 根本没有在 https://jsfiddle.net/ 上工作

您能告诉我为什么会遇到这个问题吗?我应该做哪些更改才能使其在每个平台上都能正常工作?

function append(a){
  if (document.getElementById('text1').innerHTML == '0')
    document.getElementById('text1').innerHTML = document.getElementById(a).value;
    else
    document.getElementById('text1').innerHTML += document.getElementById(a).value;
};
<div>
<p id='text1' style="border-style: inset;
         width:200px;
         display:inline-block;">0</p><br>
<button value="1" id='a1' onclick="append(this.id)">1</button></div>
  

最佳答案

默认情况下,JSFiddle 将您的 JavaScript 包装在 onload 函数中。这意味着 function append 仅在该范围内定义,而不是全局的。

全局变量(和函数)通常被认为是不好的做法,内联事件处理程序也是如此。

尝试:

document.getElementById('a1').onclick = append;

然后,在 function append 中,简单地引用 this.value

关于javascript - 为什么我的 JavaScript 代码在 jsfiddle 上显示不同的行为?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43503001/

相关文章:

javascript - 使用设置属性更改 svg 返回错误

javascript - 从 HTML 中的 JavaScript 函数获取信息。如何?

javascript - 保持滚动可见但在导航菜单打开时禁用

html - WebKit:没有 <DOCTYPE> 的 flexbox?

javascript - Mapbox 3D 线解决方法

javascript - 将文本文件读入node.js

javascript - 使用 colorbox 加载外部 url 然后 chop

javascript - Select2 更改事件 - 在第一个 select2 框值更改时更改下一个 select2 框的选项

javascript - 向下滑动显示更多内容

javascript - 如何提取子串