遗漏的类型错误：CONTENTEDITABLE不是一个函数

我试图创建将启用或禁用contenteditable但是对于所有<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>

来源

2017-03-02 Przemek

您的脚本可能未运行，或者在contentEditable（）被定义之前失败。我们需要一个http://jsfiddle.net/例子来看看到底发生了什么。 – Cauterite

事实上，代码的顺序在这里很重要。另外，getElementsByCLassName返回一个活动节点列表，因此您需要访问第一个节点x [0]。 'console.log =（helllo）;'是一个错字。 – Shilly

它可能是属性'''contentEditable'''的初始值不是'''“true”'''但是''''继承“'''？ – daniegarcia254

所以很多问题我只是发表一个注释的例子。

<!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>

来源

2017-03-02 14:22:16 Shilly

它的工作，但它正在改变contenteditable从“假”为“真”只为一个div，而我想它改变它的所有div＃content-link2 – Przemek

然后，你必须循环所有的divs对不起，因为你没有显示任何循环，所以错过了那个部分 – Shilly

这是因为我没有任何循环，你能更新一个答案来告诉我它是如何完成的吗？当然， – Przemek

-2

你已经错过传递参数到你的函数定义：

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!"; 
    } 
}

来源

2017-03-02 14:03:25

尝试更改函数名称，然后它将工作 –

你猜？ –

不，我已经尝试过，然后错误更改为'x.setAttribute'没有定义，这意味着它进入功能和错误是因为我没有定义'x.setAttribute' –

使加载的页面里面肯定contentEditable功能和它不是任何其他函数中定义。尝试从Chrome或Firebug控制台执行contentEditable函数。

来源

2017-03-02 14:09:25

从您的代码中有其他错误

除此之外，主要的问题是你的功能无法访问。这里的地方，我已经把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... });

来源

2017-03-02 14:56:05

遗漏的类型错误：CONTENTEDITABLE不是一个函数

回答

相关问题