未捕獲的TypeError：contentEditable不是函數

Question

我正在嘗試創建一個帶有將對所有<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>

Answer 1

如此多的問題，我將只發布一個帶注釋的示例。

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

Answer 2

確保contentEditable函數已加載到頁面內部，並且未在任何其他函數中定義。 嘗試從Chrome或Firebug控制台執行contentEditable函數。

Answer 3

除了代碼中的其他錯誤外，主要問題是無法訪問函數。 這是我在文檔中放置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... });

Answer 4

您錯過了將參數傳遞給函數定義的方法：

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

未捕獲的TypeError：contentEditable不是函數

問題描述

4 個解決方案

解決方案1
1 已采納 2017-03-02 14:22:16

解決方案2
0 2017-03-02 14:09:25

解決方案3
0 2017-03-02 14:56:05

解決方案4
-2 2017-03-02 14:03:25

未捕獲的TypeError：contentEditable不是函數

問題描述

4 個解決方案

解決方案1 1 已采納 2017-03-02 14:22:16

解決方案2 0 2017-03-02 14:09:25

解決方案3 0 2017-03-02 14:56:05

解決方案4 -2 2017-03-02 14:03:25

解決方案1
1 已采納 2017-03-02 14:22:16

解決方案2
0 2017-03-02 14:09:25

解決方案3
0 2017-03-02 14:56:05

解決方案4
-2 2017-03-02 14:03:25