Question

我在DOM中仅有的元素是提交的输入。之后，我创建了一个DIV并将其附加到主体上，并添加了一些样式并为其设置了一些属性。然后，我为输入分配了两个事件，每个事件运行一个单独的click事件和一个函数。我要执行的功能是更改元素的背景色。当我现在单击输入时，而不是运行第一个函数或“ functionOne”，而是运行“ functionTwo”。在控制台中，“ functionOne”向我显示“未定义函数”。代码如下：

 var btn=document.getElementById("submit");



var div = document.createElement("DIV");
var x=document.body.appendChild(div);

    x.style.width="250px";
    x.style.height="250px";
    x.style.backgroundColor="red";

    x.setAttribute("ID","box");
    x.setAttribute("CLASS","box")

console.log(x);

btn.addEventListener("click",functionOne);
btn.addEventListener("click",functionTwo);

var c =function functionOne(){
    document.getElementById("box").style.backgroundColor="blue";
};
console.log(c);


function functionTwo(){
    document.getElementById("box").style.backgroundColor="grey";
};

Answer 1

它与函数声明与函数表达式有关。

https://medium.com/@mandeep1012/function-declarations-vs-function-expressions-b43646042052

在编写var c时，您声明的是值是函数的变量。 functionTwo是一个函数表达式。

在编译时，functionTwo会提升到代码的顶部，即使将其写到最后也可以读取。

解决方案1：

将事件监听器移至代码底部

解决方案2：

使两个函数都成为函数表达式

Answer 2

您已使用函数表达式。 c是现在的功能名称。 var c = function（）和var c = function functionOne（）是相同的东西。见下文将适用。

var btn=document.getElementById("submit");



var div = document.createElement("DIV");
var x=document.body.appendChild(div);

    x.style.width="250px";
    x.style.height="250px";
    x.style.backgroundColor="red";

    x.setAttribute("ID","box");
    x.setAttribute("CLASS","box")

console.log(x);
btn.addEventListener("click",functionTwo);

var c =function(){
    document.getElementById("box").style.backgroundColor="blue";
};
console.log(c);
btn.addEventListener("click",c);


function functionTwo(){
    document.getElementById("box").style.backgroundColor="grey";
};

<button id="submit">Submit</button>

Answer 3

在您的情况下，按下按钮将立即触发两个功能。可以在日志中看到。

const request = require('request');



async function downloadUrl(url, numTimes) {
    for (let i = 0; i< numTimes; i++) {
        try{
            const objToResolve = await doDownload(url);
            if(objToResolve.err){
                console.log(`Error: ${objToResolve}, try: ${i}`);   
            }else{
                console.log(`Size: ${objToResolve.buffer.length}, try: ${i}`);
            }
        }catch(timeout){
            console.log(`Error: ${timeout}, try: ${i}`);  
        }

    }
}

// wrap a request in an promise
function doDownload(url) {
    const timeout = new Promise((resolve, reject) => {
        setTimeout(() => {
          reject(new Error('timeout'));
        }, 300);
      });
      const requestPromisse = new Promise((resolve, reject) => {
        request({uri:url, timeout:3000}, (err, resp, buffer) => {
            if (err) {
                reject({err});
            }else{
                resolve({err, resp, buffer});
            }
        });
    });
    return Promise.race([timeout,requestPromisse]);    
}

// now to program the "usual" way
// all you need to do is use async functions and await
// for functions returning promises
function main() {
    console.log('main called');
    downloadUrl('http://www.macoratti.net/11/05/c_aspn3c.htm', 5);
}

// run your async function
main();

let btn=document.getElementById("submit");
let div = document.createElement("DIV");
    div.style.width="250px";
    div.style.height="250px";
    div.style.backgroundColor="red";

    div.setAttribute("id","box");
    div.setAttribute("class","box")
document.body.appendChild(div);
// you can use only div variable 
console.log(div);

btn.addEventListener("click",functionOne);
btn.addEventListener("click",functionTwo);


function functionOne(){
console.log('1');
    div.style.backgroundColor="blue";
};

function functionTwo(){
console.log('2');
    div.style.backgroundColor="grey";
};

这是使用JS中相同元素的eventListener执行click事件的正确的纯代码吗？

3 个答案: