Question

当我点击按钮时，我无法理解为什么文本没有改变。它正在页面启动时立即执行。我不确定为什么会这样，因为我告诉它只在你点击按钮时执行。

<!DOCTYPE html>
<html id="all">
<head>
    <head>
    </head>
    <title>Lab8</title>

    <style></style>

    </head>

<body>
<script>
    var iDiv = document.createElement('div');
    iDiv.id = 'block';
    iDiv.className = 'block';
    document.getElementsByTagName('body')[0].appendChild(iDiv);
    iDiv.style.backgroundColor = "#d79365";
    iDiv.style.padding = "40px";

    var innerDiv2 = document.createElement('div');
    innerDiv2.className = 'block-3';

    iDiv.appendChild(innerDiv2);
    innerDiv2.style.padding = "40px";
    innerDiv2.style.textAlign = "center";
    innerDiv2.innerHTML = "Here is changing the text: ";
    //innerDiv2.innerHTML = "Text Change when button clicked";
    //innerDiv2.style.textAlign = "center";



    // Now create and append to iDiv
    var innerDiv = document.createElement('div');
    innerDiv.className = 'block-2';

    // The variable iDiv is still good... Just append to it.
    iDiv.appendChild(innerDiv);
    innerDiv.innerHTML = "I'm the inner div";
    innerDiv.style.padding = "40px";
    innerDiv.style.backgroundColor = "#eac67a";

    var ClickButton = document.createElement('button');
    ClickButton.className = 'block-4';
    iDiv.appendChild(ClickButton);
    ClickButton.innerHTML = "Style";
    ClickButton.style.margin = "auto";
    ClickButton.style.display = "block";
    ClickButton.style.width = "80px";
    ClickButton.style.height = "50px";
    ClickButton.style.top = "50px";
    ClickButton.style.backgroundColor = "#233237";
    ClickButton.style.color = "white";

    function js_style(){
        alert("hi");
        document.querySelector("innerDiv2");
        innerDiv2.style.fontSize = 'large';
        innerDiv2.style.font = 'italic bold 20px arial,serif';
        innerDiv2.style.color = "#eac67a";
    };

    document.getElementsByTagName('button').onclick = js_style();

    </script>
</body>

Answer 1

document.getElementsByTagName（＆＃39; button＆＃39;）返回HTMLCollection。设置＆＃39; onclick＆＃39; HTMLCollection的值没有设置＆＃39; onclick＆＃39;按钮的句柄。

我可以通过给按钮一个id并通过该id（而不是它的标签名称）检索按钮来获得示例： https://jsfiddle.net/0L1kj3ja/

var iDiv = document.createElement('div');
    iDiv.id = 'block';
    iDiv.className = 'block';
    document.getElementsByTagName('body')[0].appendChild(iDiv);
    iDiv.style.backgroundColor = "#d79365";
    iDiv.style.padding = "40px";

    var innerDiv2 = document.createElement('div');
    innerDiv2.className = 'block-3';

    iDiv.appendChild(innerDiv2);
    innerDiv2.style.padding = "40px";
    innerDiv2.style.textAlign = "center";
    innerDiv2.innerHTML = "Here is changing the text: ";
    //innerDiv2.innerHTML = "Text Change when button clicked";
    //innerDiv2.style.textAlign = "center";



    // Now create and append to iDiv
    var innerDiv = document.createElement('div');
    innerDiv.className = 'block-2';

    // The variable iDiv is still good... Just append to it.
    iDiv.appendChild(innerDiv);
    innerDiv.innerHTML = "I'm the inner div";
    innerDiv.style.padding = "40px";
    innerDiv.style.backgroundColor = "#eac67a";

    var ClickButton = document.createElement('button');
    ClickButton.id = 'btn';
    ClickButton.className = 'block-4';
    iDiv.appendChild(ClickButton);
    ClickButton.innerHTML = "Style";
    ClickButton.style.margin = "auto";
    ClickButton.style.display = "block";
    ClickButton.style.width = "80px";
    ClickButton.style.height = "50px";
    ClickButton.style.top = "50px";
    ClickButton.style.backgroundColor = "#233237";
    ClickButton.style.color = "white";

    function js_style(){
        alert("hi");
        document.querySelector("innerDiv2");
        innerDiv2.style.fontSize = 'large';
        innerDiv2.style.font = 'italic bold 20px arial,serif';
        innerDiv2.style.color = "#eac67a";
    };

    document.getElementById('btn').onclick = js_style;

Answer 2

代码的问题是getElementsByTagName返回一个HTMLCollection - 它的行为有点像数组，因为你可以使用像x[0]这样的数组语法访问各个元素

但是，当您动态创建按钮时，您可以省去它，并且在此过程中，省去了上一个千禧年代码element.onclick=rubbish

var ClickButton = document.createElement('button');
ClickButton.addEventListener('click', js_style);

完成

Answer 3

而不是 document.getElementsByTagName('button').onclick = js_style(); 试试这个：

 var buttons = document.getElementsByTagName('button');
for (var i=0;i<buttons.length;i++)
{
buttons[i].onclick = js_style;
}

当您使用js_style();时，javascript会调用该函数，因此您只需将函数名称引入.onclick

Answer 4

您将onclick事件附加到JS节点的集合。我已经重构了您的代码，并在button元素中添加了一个类来附加click事件。

始终建议添加带有js前缀的类，以将事件处理程序附加到DOM元素。通过这种方式，没有人会混淆js-*类。

＆＃13;

//create outer div and apply styles
var outerDiv = document.createElement('div');
var outerDivStyle = 'background-color:#d79365;padding: 40px;';
outerDiv.id = 'block';
outerDiv.className = 'block';
document.getElementsByTagName('body')[0].appendChild(outerDiv);
outerDiv.style.cssText = outerDivStyle;

//create inner div and apply styles
var innerDiv = document.createElement('div');
innerDiv.className = 'block-3';

outerDiv.appendChild(innerDiv);
var innerDivStyle = 'padding: 40px;text-align:center;';
innerDiv.innerHTML = "Here is changing the text: ";
innerDiv.style.cssText = innerDivStyle;



//create last div and apply styles
var lastDiv = document.createElement('div');
lastDiv.className = 'block-2';

// The variable iDiv is still good... Just append to it.
outerDiv.appendChild(lastDiv);
lastDiv.innerHTML = "I'm the inner div";
var lastDivStyle = 'background-color:#eac67a;padding: 40px;';
lastDiv.style.cssText = lastDivStyle;


//create button
var clickButton = document.createElement('button');
clickButton.id = 'js-btn';
clickButton.className = 'block-4';
outerDiv.appendChild(clickButton);
var btnStyles = 'background-color:#233237;color: white;margin:auto;display:block;width: 80px; height:50px;';
lastDiv.style.cssText = lastDivStyle;
clickButton.innerHTML = "Style";
clickButton.style.cssText = btnStyles;

function jsStyle() {
  alert("hi");
  document.querySelector("innerDiv");
  innerDiv.style.fontSize = 'large';
  innerDiv.style.font = 'italic bold 20px arial,serif';
  innerDiv.style.color = "#eac67a";
};

document.querySelector('#js-btn').onclick = jsStyle;

＆＃13;

为什么我的Javascript代码中的函数会立即执行，但是当我单击按钮时却没有？

4 个答案: