Javascript和HTML。如何使警報顯示在HTML表單上，而不是警報框

我對JavaScript很新，我試圖將此Javascript代碼與HTML集成。目前，當您在瀏覽器中運行腳本時，它會提出5個數學問題，顯示您有多少正確答案，然後顯示5個警告框，顯示問題，答案，正確答案以及您是否正確。現在我想要做的不是將這些信息顯示在警報框中，而是希望所有問題都以HTML顯示。Javascript和HTML。如何使警報顯示在HTML表單上，而不是警報框

因此，對HTML的輸出會看起來像THIS. < ---

這裏是JavaScript代碼，我到目前爲止

<script> 
function ask() { 
    var a = Math.floor(Math.random() * 10) + 1; 
    var b = Math.floor(Math.random() * 10) + 1; 
    var op = ["*", "+", "/", "-"][Math.floor(Math.random()*4)]; 

    return { 
      question : "How much is " + a + " " + op + " " + b + "?", 
      ansGiven: prompt("How much is " + a + " " + op + " " + b + "?"), 
      ansCorrect : eval(a + op + b), 
      get isCorrect(){return this.ansGiven == this.ansCorrect} 
      }; 
} 

var questions = [ask(), ask(), ask(), ask(), ask()] 
    total = questions.length, 
    correct = questions.filter(function(ans){return ans.isCorrect}).length; 

window.alert("You got "+correct+"/"+total+" correctly"); 
questions.forEach(function(q, i){ 
    alert("Question " +(i+1)+ " : " + q.question 
    + "\nAnswer: " + q.ansGiven 
    + "\nCorrect Answer: " + q.ansCorrect 
    + "\nYou were " + ((q.isCorrect)?"Correct!":"Wrong!")); 
}); 

</script>

而且你可以測試出javascript代碼HERE

我知道你可能必須使用表單佈局。但我不確定如何顯示出現在警報中的相同消息佈局，以相同的格式顯示，但作爲html中的列表顯示，因此它顯示了所有問題，而不僅僅是一次一個。任何幫助將非常感激！

來源

2014-11-22 James

您可以嘗試使用jQuery與功能，並使用.html()功能，以及append()功能。

html()將設置元素的內容爲無論你說的是什麼。 IE：

$('#question').html("<p>" + questionNum + ". What is " + equation + "?</p><input type='number' name='input'><br><input type='submit' value='Check Ans'>");

然後爲每個結果，你可能想要做

$('#results').append("<p>Question " + questionNum + " : How much is " + equation + "? - " + result + "</p>");

你的HTML可能看起來像這樣：

<html> 
    <body> 
    <div id='question'></div> 
    <div id='answer'></div> 
    </body> 
</html>

你的最終結果將結束是什麼如：

<html> 
    <body> 
    <div id='question'> 
     <p>5. What is 4/2?</p><input type='number' name='input'><br> 
     <input type='submit' value='Check Ans'> 
    </div> 
    <div id='answer'> 
     <p>Question 1 : How much is 1 + 2? - You were right!</p> 
     <p>Question 2 : How much is 9 * 21? - You were wrong!</p> 
     <p>Question 3 : How much is 1 + 42? - You were right!</p> 
     <p>Question 4 : How much is 32 - 9? - You were right!</p> 
    </div> 
    </body> 
</html>

編輯：的jsfiddle

I didn't have a limit of 4 question and then a stop like you have, but it does work purely with HTML.

該函數使用在第17行和19 2個append() S，一個用於正確，另一個用於不正確。有了這個，它會將下一個答案添加到div的底部。 IE：1,2,3,4,5,6,7等。回答這麼多問題後，最新消息將在屏幕上消失。如果你想在最上面顯示最新的問題，IE：7，6，5 ...，那麼可以將這兩個附加內容改爲prepend()。

來源

2014-11-22 20:27:47 TheElm

不錯！有沒有辦法使用[JSFiddle？]（http：// jsfiddle。淨/） – James 2014-11-22 20:34:35

@James爲你添加一個jsfiddle。 – TheElm 2014-11-22 21:08:12

不錯！有辦法讓它停在某個數字，你認爲一個for循環會做到這一點嗎？所以當它達到5時停止，併發出消息說你已經完成了測試？ – James 2014-11-22 21:21:52

這些消息框實際上是本機對話框，它是調用到操作系統的Web瀏覽器的一部分。你不能直接做你正在尋找的東西。不過，您可以使用Twitter Bootstrap中的許多工具包中的一個，將其替換爲純JS模式窗口。

http://bootboxjs.com/是一個正在做你所描述的事情的例子。

來源

2014-11-22 20:15:45 mobiusklein

try this

function ask() { 
    var a = Math.floor(Math.random() * 10) + 1; 
    var b = Math.floor(Math.random() * 10) + 1; 
    var op = ["*", "+", "/", "-"][Math.floor(Math.random()*4)]; 

    return { 
      question : "How much is " + a + " " + op + " " + b + "?", 
      ansGiven: prompt("How much is " + a + " " + op + " " + b + "?"), 
      ansCorrect : eval(a + op + b), 
      get isCorrect(){return this.ansGiven == this.ansCorrect} 
      }; 
} 

var questions = [ask(), ask(), ask(), ask(), ask()] 
    total = questions.length, 
    correct = questions.filter(function(ans){return ans.isCorrect}).length; 

var result= "<h1>result</h1><br/>You got "+correct+"/"+total+" correctly<br/>"; 
questions.forEach(function(q, i){ 
    result+=("Question " +(i+1)+ " : " + q.question 
    + "\nAnswer: " + q.ansGiven 
    + "\nCorrect Answer: " + q.ansCorrect 
    + "\nYou were " + ((q.isCorrect)?"Correct!":"Wrong!"))+"<br/>"; 
}); 
document.write(result);

來源

2014-11-22 20:18:44 ashkufaraz

Javascript和HTML。如何使警報顯示在HTML表單上，而不是警報框

回答

相關問題