将函数内部的变量传递给其他函数而不更改其在 Javascript 中的值

Question

我有 2 个函数我想知道如何获取在函数 generate() 中生成随机数的变量 "foto" 到函数 verify() 因为 indexOf 将验证数字在 generate() 函数上生成，并将检查此值是否在 verify() 中定义的数组之一。

function generate() { 

    var score = document.getElementById('score');
    var foto  =   Math.floor(Math.random() *20) + 1;
    var fotoDOM = document.querySelector('.foto');
    fotoDOM.src = 'foto-' + foto + '.jpg';
    console.log(foto);
    document.getElementById('photo').style.animation ="appearPerson 1s";
    score.innerHTML = foto; 

}

document.querySelector('.btn').addEventListener('click', verify);     

function verify() {

    var yesMeetup = [0,1,2,3,4,5,6,7,8,9,10,12,13,14,15];
    var notMeetup = [16,17,18,19,20];
    var notButton = document.getElementById('no');
    var yesButton = document.getElementById('yes');
    var decisao = document.getElementById('decisao');
    debugger

    if (yesButton) {

        if (yesMeetup.indexOf(foto) ) {
            decisao.textContent = "You got it";
        } else if (notMeetup.indexOf(foto) ) {
            decisao.textContent = "wrong";
        }
    }

    else if (notButton) {

        if (notMeetup.indexOf(foto) ) {
            decisao.textContent = "You Gou it";
        } else if (yesMeetup.indexOf(foto) ) {
            decisao.textContent = "Wrong";
        }

    }
}

Answer 1

在 generate 函数之外声明 foto 变量（这将使它成为全局变量），它将在 verify 函数中可用。我建议您阅读 closures

var foto;
function generate(){ 

    var score = document.getElementById('score');
    foto = Math.floor(Math.random() *20) + 1;
    var fotoDOM = document.querySelector('.foto');
    fotoDOM.src = 'foto-' + foto + '.jpg';
    console.log(foto);
    document.getElementById('photo').style.animation ="appearPerson 1s";
    score.innerHTML = foto; 

}



document.querySelector('.btn').addEventListener('click', verify);     


function verify()
{


    var yesMeetup = [0,1,2,3,4,5,6,7,8,9,10,12,13,14,15];
    var notMeetup = [16,17,18,19,20];
    var notButton = document.getElementById('no');
    var yesButton = document.getElementById('yes');
    var decisao = document.getElementById('decisao');
    debugger
    if(yesButton){

        if(yesMeetup.indexOf(foto) ){

            decisao.textContent = "You got it";

        }else if(notMeetup.indexOf(foto) ){

            decisao.textContent = "wrong";
        }
    }

    else if (notButton){

        if(notMeetup.indexOf(foto) ){

            decisao.textContent = "You Gou it";


        }else if(yesMeetup.indexOf(foto) ){

            decisao.textContent = "Wrong";

        }

    }  
}

Answer 2

如果函数 verify 需要 foto 的值，那么它应该是该函数的参数：

document.querySelector('.btn').addEventListener('click', function() {
    var foto = generate();
    verify(foto);
});  

...

/**
 * Generate a thing.
 */
function generate() {
    ...
    return foto;
}

/**
 * Veryify the thing.
 * @param {Number} 
 */
function verify(foto) {
    ...
}

我鼓励你尽可能地隔离你的函数，这样它们就不会真正依赖于外部变量。也许在其中一个函数中需要操纵 DOM，但是如果你可以将这些东西彼此抽象开——DOM 在一个函数或代码中操纵，而所有其他业务逻辑在另一组函数中, 你的代码应该更容易读/写/调试。

将函数内部的变量传递给其他函数而不更改其在 Javascript 中的值

Passing a variable that is inside a function to other function without changing its value in Javascript

javascript

arrays

variables

function

indexof