Uncaught : contentEditable不是函数
Uncaught : contentEditable不是函数
提问于 2017-03-02 14:00:40
我正在尝试创建一个带有函数的按钮，该函数将为所有的contenteditable启用或禁用<div>，但是我知道contentEditable不是一个函数，有人知道为什么吗？
function contentEditable() {
var x = document.getElementsByClassName("editable");
if ($(this).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!";
}
}<button onclick="contentEditable(this);" id="contentEdit" class="btn btn-primary form-control margin">Edit Text</button>回答 4
Stack Overflow用户
回答已采纳
发布于 2017-03-02 14:22:16
那么多的问题，我只是张贴一个附加注释的例子。
<!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>Stack Overflow用户
发布于 2017-03-02 14:09:25
确保在页面中加载了contentEditable函数，并且它没有在任何其他函数中定义。尝试从chrome或firebug控制台执行contentEditable函数。
Stack Overflow用户
发布于 2017-03-02 14:56:05
除了代码中的其他错误之外，主要问题是您的函数无法访问。这里有一个小提琴，我把contentEditable()放在文档中，所以在<button onclick="document.contentEditable()">按钮中使用它
document.contentEditable = function() {
var divs = $("div.editable"),
button = $("#btn"),
attr;
divs.each(function(index, item) {
attr = $(this).attr('contentEditable');
$(this).attr('contentEditable', attr == 'true' ? 'false' : 'true');
});
button.html(attr == 'true' ? 'Disable' : 'Enable');
//console.log(divs);
}div.editable {
width: 150px;
height: 50px;
margin: 10px;
}
[contentEditable="true"] {
background: black;
}
[contentEditable="false"] {
background: red;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div contentEditable="true" class="editable"></div>
<div contentEditable="true" class="editable"></div>
<div contentEditable="true" class="editable"></div>
<div contentEditable="true" class="editable"></div>
<div contentEditable="true" class="editable"></div>
<button id="btn" onclick="document.contentEditable();">Disable</button>
但是，既然您已经在使用Jquery，为什么不使用以下内容：
$(":button")//you can use any selector for your button, id perhaps?
.on('click', function() { //your code... }); 页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/42557460
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号