JS函數參數自己重設

我正在嘗試創建一個簡單的問題答案「閃存卡」程序。用戶用相反的語言鍵入單詞的含義。一切工作正常，除了一件事：JS函數參數自己重設

當你點擊按鈕進入下一級，它工作正常。但是，當您輸入正確的答案時，它會返回到第1級。爲什麼這是？下一個（）函數級別參數重置自己回到1？請幫忙！

HTML：

</head> 

    <body> 
    <h1>Spanish</h1> 
    <div id="main"> 
     <h1 id="topic_name">Subject Pronouns</h1> 
     <p>Type the word/phrase below in the opposite language</p> 
     <p>If there is an accent or ~ above a letter, put^before that letter. Example: diecis^eis</p> 
     <hr id="margin-bottom"> 
     <h1 id="question"></h1> 
     <input id="answer_box"/> 
     <button id="next"></button> 
     <button id="answer">Show Answer</button> 
    </div> 

    </body> 
</html>

JS：

$(document).ready(function(){ 

    var lvl1= 
    [ 
     [["I"],["yo"]], 
     [["you (formal)"],["usted"]], 
     [["you (informal)"],["t^u"]], 
     [["he"],["^el"]], 
     [["she"],["ella"]], 
     [["we (masculine)"],["nosotros"]], 
     [["we (feminine)"],["nosotras"]], 
     [["you all (formal)"],["ustedes"]], 
     [["you all (informal)"],["vosotros"]], 
     [["they (masculine or mixed)"],["ellos"]], 
     [["they (feminine)"],["ellas"]], 
     ]; 

    var lvl2= 
    [ 
    [["yo"],["I"]], 
    [["usted"],["you (formal)"]], 
    [["t^u"],["you (informal)"]], 
    [["^el"],["he"]], 
    [["ella"],["she"]], 
    [["nosotros"],["we (masculine)"]], 
    [["nosotras"],["we (feminine)"]], 
    [["ustedes"],["you all (formal)"]], 
    [["vosotros"],["you all (informal)"]], 
    [["ellos"],["they (masculine)"]], 
    [["allas"],["they (feminine)"]], 
    ]; 

    var lvl3= 
    [ 
    [["yo soy"],["I am"]], 
    [["tú eres"],["you (informal) are"]], 
    [["él es"],["he is"]], 
    [["ella es"],["she is"]], 
    [["usted es"],["you (formal) are"]], 
    [["nosotros somos"],["we are"]], 
    [["vosotros sois"],["you all (informal) are"]], 
    [["ellos/ellas son"],["they are"]], 
    [["ustedes son"],["you all (formal) are"]], 
    ]; 

    var lvl4= 
    [ 
    [["I am"],["yo soy"]], 
    [["you (informal) are"],["t^u eres"]], 
    [["he is"],["^el es"]], 
    [["she is"],["ella es"]], 
    [["you (formal) are"],["usted es"]], 
    [["we are"],["nosotros somos"]], 
    [["you all (informal) are"],["vosotros sois"]], 
    [["you all (formal) are"],["ustedes son"]], 
    ]; 

    next(1); 

    function next(level){ 
    random=(Math.floor(Math.random()*10)); 

    switch(level){ 
     case 1: 
     question=lvl1[random][0]; 
     answer=lvl1[random][1]; 
     $('#next').text("Level 2"); 
     break; 
     case 2: 
     question=lvl2[random][0]; 
     answer=lvl2[random][1]; 
     $('#next').text("Level 3"); 
     break; 
     case 3: 
     random=(Math.floor(Math.random()*9)); 
     question=lvl3[random][0]; 
     answer=lvl3[random][1]; 
     $('#next').text("Level 4"); 
     break; 
     case 4: 
     var random=(Math.floor(Math.random()*8)); 
     question=lvl4[random][0]; 
     answer=lvl4[random][1]; 
     $('#next').text("Done"); 
     break; 
     default: 
     alert("switch error"); 
    } 


    $('#question').text(question); 



    $('#answer_box').keyup(function(){ 
     if($(this).val()==answer){ 
     $('#answer_box').attr("placeholder",""); 
     $('#answer_box').val(""); 
     next(level); 
     } 
    }); 



    $('#next').click(function(){ 
     next(level+1); 
    }); 



    $('#answer').click(function(){ 
     $('#answer_box').attr("placeholder",answer); 
    }); 


    }//function next 

});//end

CSS：

#main{ 
    border:3px solid blue; 
    height:500px; 
    width:600px; 
    top:50%; 
    left:50%; 
    position:fixed; 
    margin-top:-230px; 
    margin-left:-300px; 
    border-radius:5%; 
} 

h1{ 
    text-align:center; 
} 


p{ 
    text-align:center; 
} 

#margin-bottom{ 
    margin-bottom:80px; 
} 

#next{ 
    display:block; 
    margin:0 auto; 
} 

#answer_box{ 
    display:block; 
    margin:0 auto; 
    margin-bottom:20px; 
} 

#answer{ 
    display:block; 
    margin:0 auto; 
}

來源

2016-09-22 Blake Allen

我沒有在任何地方看到「水平」？ –

level是next（）函數的參數，我最初傳入的是1。我可以不使用它作爲函數中的變量嗎？ –

該問題未能聲明變量並且意外創建閉包。

question=和answer=正在創建相同名稱的窗口屬性，因爲它們尚未聲明。

level是功能next正式參數，首先由next(1)

的點擊函數聲明爲嵌套職能範圍內next和訪問存儲在級別參數的值的語句設置爲1（創建關閉時next()返回）。每次調用next時，它們也會重新應用到按鈕元素。

建議的解決方案：在「準備就緒」IIFE內聲明questionanswer和level變量。在調用next之外聲明並應用一次按鈕事件處理程序。使用顯式代碼維護level。

更新與細節：

刪除

next(1);

而且隨着變量定義和未來（）的調用不帶參數的替換。級別在下一個功能之外被維護。

var question = ""; 
var answer = ""; 
var level = 1; 
next();

從function next(level)...卸下等級參數，並用

function next(){ 
random=(Math.floor(Math.random()*10)); 

switch(level){ 
    case 1: 
    question=lvl1[random][0]; 
    answer=lvl1[random][1]; 
    $('#next').text("Level 2"); 
    break; 
    case 2: 
    question=lvl2[random][0]; 
    answer=lvl2[random][1]; 
    $('#next').text("Level 3"); 
    break; 
    case 3: 
    random=(Math.floor(Math.random()*9)); 
    question=lvl3[random][0]; 
    answer=lvl3[random][1]; 
    $('#next').text("Level 4"); 
    break; 
    case 4: 
    var random=(Math.floor(Math.random()*8)); 
    question=lvl4[random][0]; 
    answer=lvl4[random][1]; 
    $('#next').text("Done"); 
    break; 
    default: 
    alert("switch error"); 
} 

$('#question').text(question); 


}// end of function next body

這在很大程度上是因爲代碼發佈相同的替換，但移動KEYUP和下一步按鈕搬運者遵循function next主體;不要在它裏面定義它們：

$('#next').click(function(){ 
    level = level + 1; // increase level 
    next(); 
}); 

$('#answer_box').keyup(function(){ 
    if($(this).val()==answer){ 
    $('#answer_box').attr("placeholder",""); 
    $('#answer_box').val(""); 
    next(); // stay on current level 
    } 
});

我還沒有把代碼來處理髮生了什麼，當你點擊時，「完成」正顯示出下一步按鈕。您詢問的關閉是通過註冊在next函數中創建的鍵控和單擊處理程序匿名函數創建的：匿名函數在next內查找變量和參數定義，對應於創建匿名函數時的值。如果您不熟悉這個概念，請在javascript中搜索關閉。

來源

2016-09-22 01:50:26 traktor53

謝謝，但我有一些問題：1）如果我把按鈕點擊函數放在next（）函數之外，那麼#next click函數如何知道下一級應該進入哪個級別傳遞給next（））？或者#answer click功能如何知道顯示的是什麼答案？他們需要的這些變量不在他們的範圍之內。這是你明確的代碼是什麼意思？ 2）當你說next（）返回「創建閉包」時，你是什麼意思？ –

請參閱[本社區wiki]（http://stackoverflow.com/a/111111/1848578）瞭解關閉的信息。 – qxz

哇，非常感謝您的詳細解答！在'next'函數之外定義這些變量的概念，然後在內部對它們做**的東西將幫助我在未來的許多項目中。我開始更全面地理解繼承和麪向對象編程。 –

每次調用一個函數會爲＃下一個註冊事件，＃answer_box和「＃的答案，你確定這是你想要的嗎？只是因爲這將是一個問題，你的問題是不是所有

來源

2016-09-22 02:10:08

JS函數參數自己重設

回答

相關問題