以JS提示帶var - 我怎樣才能通過HTML表單？

我已經學習了幾個星期的HTML/CSS/JavaScript，現在我正在練習一個小型項目，其中包括讓人們回答數學問題並驗證他們的答案。以JS提示帶var - 我怎樣才能通過HTML表單？

我現在的進度可以在http://dany.faceflow.com

可以看出，我知道我可能沒有使用最好的策略來開發這個迷你遊戲，所以任何的建議是對有用的。然而現在，問題在於我通過JS提示接受了一個變量的用戶回答，並且我想通過一個HTML表單（不那麼討厭）來實現。

在我的源代碼，你可以看到在函數中這一行：

var userInput = prompt(numb1 + symbol + numb2);

然後，還在相同的功能，我有一個if/else結構給用戶的答案與正確答案進行比較。代碼的工作原理，我只是不知道如何使提示基於HTML的代替。我試過一個帶有ID的html表單，並且在JS中使用getElementById，document.write和其他一些東西，但是我從來沒有爲它工作過。

（這裏是所有的JS）

var number1 = function() { 
    var numb1 = Math.floor(Math.random() * 41) + 10; 
    return numb1; 
} 

var number2 = function() { 
    var numb2 = Math.floor(Math.random() * 41) + 10; 
    return numb2; 
} 


var userAnswer = function() { 
    var numb1 = number1(); 
    var numb2 = number2(); 

    var randomSymbol = Math.random(); 

    if (randomSymbol > 0.5) { 
     var symbol = "+"; 
    } else { 
     var symbol = "-"; 
    } 

    // add the math question in the html bubble 
    document.getElementById('bubble').innerHTML = numb1 + symbol + numb2; 

    // Prompts the user to give an answer. Change this to HTML. 
    var userInput = prompt(numb1 + symbol + numb2); 

    //var userInput = document.getElementById('tw').value; 


    if (symbol == "+" && userInput == (numb1 + numb2)) { 
     document.getElementById('feedback').innerHTML = "Congratulations!"; 
    } else if (symbol == "+" && userInput !== (numb1 + numb2)) { 
     document.getElementById('feedback').innerHTML = "Wrong!"; 
    } else if (symbol == "-" && userInput == (numb1 - numb2)) { 
     document.getElementById('feedback').innerHTML = "Congratulations!"; 
    } else if (symbol == "-" && userInput !== (numb1 - numb2)) { 
     document.getElementById('feedback').innerHTML = "Wrong!"; 
    } else { 
     alert("Something wrong happened. Try again."); 
    } 

    return userInput; 
}

（的HTML）

<!DOCTYPE html> 
<html> 
    <head> 
     <link type="text/css" rel="stylesheet" href="css/stylesheet.css" /> 
     <script src="js/script.js"></script> 
     <title>Improve Your Math Skills!</title> 
    </head> 

    <body> 
     <center> 

     <button onclick="userAnswer()">PLAY NOW!</button> 

     <div id="bubble"></div> 

     <div id="feedback"></div> 


     <!-- <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> --> 
     </center> 
    </body>  
</html>

謝謝

來源

2013-04-06 Dan P.

您可以使用input標籤，而不是提示。像Dinesh的回答一樣改變HTML;

<div id="bubble"></div> 
<div id="inp" style="display: none;"> 
    <input type="text" id="ans"></input>&nbsp;<button id="subBtn">Submit</button> 
</div> 
<div id="feedback"></div>

現在，對於JavaScript，有幾件事情需要考慮。首先，你有

var number1 = function() { 
    var numb1 = Math.floor(Math.random() * 41) + 10; 
    return numb1; 
} 

var number2 = function() { 
    var numb2 = Math.floor(Math.random() * 41) + 10; 
    return numb2; 
}

這兩個函數完成相同的事情;你不需要兩個單獨的函數來獲得兩個單獨的隨機數。所以，只有一個功能就足夠了。其次，現在我們有兩個功能。第一，我們有兩個功能。 userAnswer在'立即播放！'時發佈新問題被點擊並且例如evalAnswer來評估當單擊「提交」時在輸入欄中寫入的答案。

在userAnswer中，您生成兩個新的隨機數並確定將對它們進行哪些操作。此時，您可以簡單地自己評估答案並將其存儲在全局變量中。當您評估答案時，這使事情變得更加簡單，您只需做一個簡單的比較。

除此之外，您更新innerHTML爲bubble並顯示divinp。

在evalAnswer中，您從ans獲得值，並將其與當前答案的先前計算值進行比較，然後相應地更新feedback.innerHTML。

這是代碼;

//variable to maintain the current answer 
var curAns = 0; 

//Here, I get all the DOMElements I will use 
var playBtn = document.getElementById('playBtn'); 

var bubble = document.getElementById('bubble'); 

var inp = document.getElementById('inp'); 
var ans = document.getElementById('ans'); 
var subBtn = document.getElementById('subBtn'); 

var feedback = document.getElementById('feedback'); 

//I add the event listeners 
//This is equivalent to using 'onclick' 
//in the HTML, and doing it this way is only 
//my personal preference 
playBtn.addEventListener('click', function() {userAnswer();}, false); 
subBtn.addEventListener('click', function() {evalAnswer();}, false); 

//Function to get random number 
var number = function() { 
    return Math.floor(Math.random() * 41) + 10; 
}; 

//This function will be executed when 'Play Now!' is clicked. 
var userAnswer = function() { 
    //Get two separate random numbers in 
    //numb1 and numb2 
    var numb1 = number(); 
    var numb2 = number(); 
    var symbol = ''; 

    var randomSymbol = Math.random(); 

    //Determine the operation to be used 
    //and compute the corresponding correct answer for the current 
    //question 
    if (randomSymbol > 0.5) { 
     symbol = "+"; 
     curAns = numb1+numb2; 
    } else { 
     symbol = "-"; 
     curAns = numb1-numb2; 
    } 

    //Add math question to bubble 
    bubble.innerHTML = 'What is ' + numb1 + ' ' + symbol + ' ' + numb2 + '?'; 
    feedback.innerHTML = ''; 

    //Make inp div visible 
    inp.style.display = 'block'; 
    //Reset input value to '' 
    ans.value = ''; 
}; 

//This function will be executed when 'Submit' is clicked 
var evalAnswer = function() { 
    //Simply compare input value with computed 
    //answer and update feedback 
    if(parseInt(ans.value) !== curAns) { 
     feedback.innerHTML = 'Wrong answer, try again!'; 
    } 
    else { 
     feedback.innerHTML = 'You got it right, congratulations!'; 
    } 
};

Here's a working example。

希望有幫助！

來源

2013-04-06 10:28:53 Rikonator

非常感謝。作爲一個初學者，這正是那種能夠讓我快速改進的東西。我可以發現我犯的很多錯誤，現在我可以對未來進行糾正。我會繼續構建遊戲;）再次感謝，非常感謝！ – 2013-04-06 10:57:20

我從你的問題不解的是，你需要相同功能的HTML本身而不是由JS在提示框中驅動，如果是這樣，下面的代碼將有助於：

HTML ADITION：

<div id="bubble"></div> 
<div id="check_ans_div" style="display:none;"> 
    <input type="text" id="txt_answer" /> 
    <input type="submit" value="Check Answer" onclick="checkanswer()" /> 
</div> 
<div id="feedback"></div>

JS變化：

var number1 = function() { 
     var numbx = Math.floor(Math.random() * 41) + 10; 
     return numbx; 
    }   
    var number2 = function() { 
     var numby = Math.floor(Math.random() * 41) + 10; 
     return numby; 
    } 
    var numb1=0; var numb2=0; 
    var userAnswer = function() { 
     numb1 = number1(); 
     numb2 = number2(); 

     var randomSymbol = Math.random(); 

     if (randomSymbol > 0.5) { 
      var symbol = "+"; 
     } else { 
      var symbol = "-"; 
     } 

     // add the math question in the html bubble 
     document.getElementById('bubble').innerHTML = numb1 + symbol + numb2; 
     if(document.getElementById('check_ans_div').style.display=='none') 
      document.getElementById('check_ans_div').style.display='block'; 
     document.getElementById('txt_answer').value=''; 

    } 

function checkanswer(){ 

     var userInput= document.getElementById('txt_answer').value; 
     if (symbol == "+" && userInput == (numb1 + numb2)) { 
      document.getElementById('feedback').innerHTML = "Congratulations!"; 
     } else if (symbol == "+" && userInput !== (numb1 + numb2)) { 
      document.getElementById('feedback').innerHTML = "Wrong!"; 
     } else if (symbol == "-" && userInput == (numb1 - numb2)) { 
      document.getElementById('feedback').innerHTML = "Congratulations!"; 
     } else if (symbol == "-" && userInput !== (numb1 - numb2)) { 
      document.getElementById('feedback').innerHTML = "Wrong!"; 
     } else { 
      alert("Something wrong happened. Try again."); 
     } 

}

來源

2013-04-06 09:24:41

非常感謝您花時間幫助我。在嘗試你的代碼時，我遇到了關於「symbol」和「numb1」「numb2」沒有被定義的問題。我想我可能不得不考慮一個計劃並重新構建該程序並應用我從您那裏學到的東西（與JS一起工作的HTML表單） – 2013-04-06 09:59:52

啊！你是對的，需要在這些函數之外聲明numb1和numb2，更新我的代碼，現在應該工作。它很好地重構代碼，因爲你正在學習，重做它會是個好主意:) – 2013-04-06 10:08:16

以JS提示帶var - 我怎樣才能通過HTML表單？

回答

相關問題