Question

我想点击div并用javascript创建两个元素然后我想点击其中一个新元素并更改另一个元素的类。大多数工作直到我想要通过调用一个名为divide（）的函数来改变类，但是在转换.onclick = divide（）;

在这里，我有这个小提琴并没有真正起作用，但我相信你能弄清楚我在说什么。我做错了吗？或者我只是错过了一个小细节？ http://jsfiddle.net/alexnode/UD6fk/16/

function myfunction(){


var tr1 = document.createElement("tr1");
var buttontranslate = document.createElement("buttontranslate");
tr1.className="trpanel";
tr1.id="trpanela";
buttontranslate.style.cssText='width:5%;height:100%;right:0px;top:0px;background:black;color:white;position:fixed;z-index:2300;cursor:pointer;'
buttontranslate.innerHTML="translate"
//buttontranslate.onclick=divide(); here is the problem


tr1.innerHTML = "Lorem ipsum dolor sit amet,";

document.body.appendChild(tr1);
document.body.appendChild(buttontranslate);



}
function divide(){ 
document.getElementById("trpanela").className = "centerpanel";
 }

编辑：这是修正过的JSfiddle，附有Paul S http://jsfiddle.net/alexnode/UD6fk/35/

的说明

Answer 1

你不能只是弥补新元素;它不是有效的 HTML 设置 onclick 属性时，需要传递函数，而不是调用该函数。

查看我对您的小提琴所做的更改here

function myfunction() {
    var tr1 = document.createElement("span"), // real elements
        buttontranslate = document.createElement("button");
    tr1.className = "trpanel";
    tr1.id = "trpanela";
    buttontranslate.className = "translate";
    buttontranslate.innerHTML = "translate"
    buttontranslate.onclick = divide; // no () because we dont want to invoke
    tr1.innerHTML = "Lorem ipsum dolor sit amet, etc...";

    document.body.appendChild(tr1);
    document.body.appendChild(buttontranslate);
}

myfunction(); // invoke on page load

function divide() {
    document.getElementById("trpanela").className = "centerpanel";
}

Javascript：创建两个元素并通过onclick更改它们的类

1 个答案: