Javascript 未捕获类型错误：contentEditable不是函数_Javascript_Jquery_Html_Contenteditable

Javascript 未捕获类型错误：contentEditable不是函数

javascript jquery html

Javascript 未捕获类型错误：contentEditable不是函数,javascript,jquery,html,contenteditable,Javascript,Jquery,Html,Contenteditable,我正在尝试创建一个按钮，该按钮具有一个功能，可以为所有启用或禁用内容可编辑，但是我发现内容可编辑不是一个功能，有人知道为什么吗函数contentEditable（）{ var x=document.getElementsByClassName（“可编辑”）； if（$（this.attr（“contentEditable”）=“true”）{ console.log=（hello）； x、 setAttribute（'contentEditable'，'true'）； button.inner

我正在尝试创建一个按钮，该按钮具有一个功能，可以为所有

启用或禁用

内容可编辑

，但是我发现

内容可编辑

不是一个功能，有人知道为什么吗

函数contentEditable（）{
var x=document.getElementsByClassName（“可编辑”）；
if（$（this.attr（“contentEditable”）=“true”）{
console.log=（hello）；
x、 setAttribute（'contentEditable'，'true'）；
button.innerHTML=“启用p的内容可编辑！”；
}否则{
x、 setAttribute（'contentEditable'，'false'）；
button.innerHTML=“禁用p的内容以进行编辑！”；
}
}

编辑文本

您没有将参数传递到函数定义中：

function contentEditable(obj) {
    // replace all this with obj
    var x = document.getElementsByClassName("editable");
    if ($(obj).attr("contentEditable") == "true") {
        console.log=(hello);
        x.setAttribute('contentEditable', 'true');
        button.innerHTML = "Enable content of p to be editable!";
    } else {
        x.setAttribute('contentEditable', 'false');
        button.innerHTML = "Disable content of p to be editable!";
    }
}

确保

contentEditable

函数加载在页面中，且未在任何其他函数中定义。尝试从chrome或firebug控制台执行

contentEditable

功能。

问题太多了，我只发布一个带注释的示例

<!DOCTYPE html>
<html lang="en">
<head></head>
<body>
<!-- make sure contenteditable is set to false initially -->
<div class="editable" contenteditable="false">some text 1</div>
<div class="editable" contenteditable="false">some text 2</div>
<div class="editable" contenteditable="false">some text 3</div>
<button id="contentEdit" class="btn btn-primary form-control margin">Edit Text</button>
<script>
var button = document.querySelector('#contentEdit');
var contentEditable = function contentEditable() {
    // getElementsByClassName returns a nodelist,so we ahve to cast it to an array, or use a basic for-loop.
    var editables = Array.prototype.slice.call(document.getElementsByClassName("editable"));
    editables.forEach(function( x ) {
        // We want to check the <div> tag for editable, not the button
        // the correct attribute is lowercase contenteditable
        if (x.getAttribute("contenteditable") === 'false') {
            // fixed syntax
            console.log("hello");
            x.setAttribute('contenteditable', 'true');
            // swicthed around Disable and Enable in the strings to make the logic correct.
            button.innerHTML = "Disable content of p to be editable!";
        } else {
            x.setAttribute('contenteditable', 'false');
            button.innerHTML = "Enable content of p to be editable!";
        }   
    });
};
button.addEventListener("click", contentEditable);
</script>
</body>
</html>


一些文本1
一些文本2
一些文本3
编辑文本
var button=document.querySelector（“#contentEdit”）；
var contentEditable=函数contentEditable（）{
//GetElementsByCassName返回一个节点列表，因此我们必须将其强制转换为数组，或者使用基本for循环。
var editables=Array.prototype.slice.call（document.getElementsByClassName（“可编辑”）；
forEach（函数（x）{
//我们要检查标签是否可编辑，而不是按钮
//正确的属性是小写的contenteditable
如果（x.getAttribute（“contenteditable”）=“false”）{
//固定语法
console.log（“你好”）；
x、 setAttribute（'contenteditable'，'true'）；
//在字符串中切换禁用和启用以使逻辑正确。
button.innerHTML=“禁用p的内容以进行编辑！”；
}否则{
x、 setAttribute（'contenteditable'，'false'）；
button.innerHTML=“启用p的内容可编辑！”；
}   
});
};
按钮。addEventListener（“单击”，内容可编辑）；

除了代码中的其他错误外，主要问题是无法访问函数。这里有一把小提琴，我在文档中放置了

contentEditable（）

，所以在按钮

document.contentEditable=函数（）{
var divs=$（“div.editable”），
按钮=$（“#btn”），
attr；
每个部门（功能（索引、项目）{
attr=$（this.attr（'contentEditable'）；
$（this.attr（'contentEditable'，attr='true'？'false'：'true'）；
});
html（attr=='true'？'Disable'：'Enable'）；
//控制台日志（divs）；
}

div.editable{
宽度：150px；
高度：50px；
利润率：10px；
}
[contentEditable=“true”]{
背景：黑色；
}
[contentEditable=“false”]{
背景：红色；
}


禁用

在定义

contentEditable（）

之前，您的脚本可能没有运行或失败。我们需要一个例子来看看到底发生了什么。实际上，代码的顺序在这里很重要。此外，getElementsByCLassName还返回一个活动节点列表，因此您需要访问第一个节点x[0]。还有

console.log=（helllo）

是一个输入错误。可能是属性

contentEditable

的初始值不是

“true”

，而是

“inherit”

？逻辑也有缺陷<代码>此按钮将是可编辑的，而内容是可编辑的，因此您必须为属性选择“x”而不是$（此）。此外，

按钮。按钮的innerHTML

在逻辑上是相反的。是否应为contentEditable==false？“启用…”“：“禁用…”（使用速记解释..呵呵）你在猜吗？没有，我尝试过，然后错误更改为

x.setAttribute

，这意味着它进入了函数，错误是因为我没有定义

x.setAttribute

，因为x是一个节点列表。。应该是

x[0]

才能首先访问

div

。所以基本上，

节点列表没有setAttribute
。是的，您是对的，因为dom选择了所有元素对象的数组，但它正在将contenteditable从“false”更改为“true”“仅针对一个div，而我希望它为#content-link2中的所有div更改它，然后您必须循环所有div。很抱歉，由于您也没有显示任何循环，因此错过了该部分。这是因为我没有任何循环，您能否更新答案以向我展示如何完成？当然是一个例子。祝您在自己的应用程序中实现它好运。大多数步骤都可以用jquery替代。太棒了，工作绝对出色，感谢您修复错误