Question

我在JSfiddle中做到了这一点：

http://jsfiddle.net/jocelynwang205/qSjn6/

它应该将一个段落变黑，但似乎无法调用该函数。它也不适用于真实的网页。

后来我将我的JavaScript添加到JSfiddle的html中，如下所示：

<script>
function changeA(){
document.getElementById('para1').style.color ='black';
}
</script>
<p id="para1">
This is a paragraph to be changed.
</p>
<a href="#" onclick="changeA(); return false">Turn black.</a>

它有效：http://jsfiddle.net/jocelynwang205/qSjn6/1/

所以我想知道原因。提前谢谢。

Answer 1

原来没有用，因为你有onlick而不是onclick，并且没有代码在head中运行但是在onload函数中（设置在左侧）导致函数对onclick attr不可见

JSFiddle默认使用onLoad函数运行的javascript，所以基本上你的代码运行如下：

<script>
window.onload = function(){
  function changeA(){
    document.getElementById('para1').style.color ='black';
  } 
};
<script>

使函数changeA对html onclick属性不可见将设置更改为＆＃34;没有包装头＃34;让它像：

一样运行

<script>
function changeA(){
  document.getElementById('para1').style.color ='black';
} 
<script>

现在使其对html

可见

以下是设置位置的屏幕截图：

enter image description here

Answer 2

在jsfiddle中指定 onlick 而不是 onClick 。

<a href="#" onlick="changeA(); return false">Turn black.</a>

将其更改为

<a href="#" onClick="changeA(); return false">Turn black.</a>

链接中的

，并在jsfiddle的左侧设置选项无包装。

Answer 3

<!DOCTYPE html >
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        #para1
        {
            color: red;
            font-weight: bold;
        }
    </style>
    <script type="text/javascript">
        function changeA()
        {
            document.getElementById('para1').style.color ='black';
        }
    </script>

</head>
<body>
    <p id="para1">This is a paragraph to be changed.</p>
    <a href="#" onclick="changeA(); return false">Turn black.</a>
    </body>
</html>

试试这个。

为什么这个简单的代码在JSfiddle中不起作用？

3 个答案: