未捕获的TypeError：contentEditable不是函数
[英]Uncaught TypeError: contentEditable is not a function
问题描述
I am trying to create a button with a function that will enable or disable contenteditable for all <div> 's however I get that contentEditable is not a function, anyone know why? 
我正在尝试创建一个带有将对所有<div>启用或禁用contenteditable的功能的按钮，但是我知道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 个解决方案
解决方案1
1 已采纳 2017-03-02 14:22:16
So many issues I'll just post an annotated example. 如此多的问题，我将只发布一个带注释的示例。
<!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>
解决方案2
0 2017-03-02 14:09:25
Make sure contentEditable function loaded inside the page and its not defined inside any other function. 确保contentEditable函数已加载到页面内部，并且未在任何其他函数中定义。 Try to execute contentEditable function from chrome or firebug console. 尝试从Chrome或Firebug控制台执行contentEditable函数。
解决方案3
0 2017-03-02 14:56:05
Aside from other errors you have in your code, main issue was your function is not accessible. 除了代码中的其他错误外，主要问题是无法访问函数。 here's a fiddle where I've put contentEditable() in document, so using it in button <button onclick="document.contentEditable()"> 这是我在文档中放置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>
But since you already are using Jquery , why not use something like: 但是，由于您已经在使用Jquery ，为什么不使用类似以下内容的代码：
$(":button")//you can use any selector for your button, id perhaps?
.on('click', function() { //your code... });
解决方案4
-2 2017-03-02 14:03:25
you have missed to pass the parameter into you function definition: 您错过了将参数传递给函数定义的方法：
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!";
}
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.