Question

我正在尝试创建一个按钮，其中的功能可以为所有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>

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()">中使用它

＆＃13;

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);
}

＆＃13;

div.editable {
  width: 150px;
  height: 50px;
  margin: 10px;
}

[contentEditable="true"] {
  background: black;
}

[contentEditable="false"] {
  background: red;
}

＆＃13;

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

＆＃13;

但由于你已经在使用 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 个答案: