javascriptのアラートを画面の中に表示させるには？

お世話になっております。javascriptを見よう見まねでクイズ問題を作成しようと挑戦しています。
問題を解いた結果を、alertで表示させていますが
これをアラートではなく、WEB画面の中に表示させるのには
どうしたらいいのでしょうか？

例）
alert(tm + "秒でクリア！！");
mondaisuu =mondaisuu +1
if (miss>0) {ruiseki=ruiseki+1}
alert(ruiseki +"回ミス"+"で問題数は"+mondaisuu)

↑の２つのアラートを、画面の下の方に分けて表示させたい。

No.2 ベストアンサー 回答者： Ogre7077 回答日時： 2015/07/21 18:54

「回答する」ボタンを押すと、二箇所に文言を表示させる具体的な例

<script>
function 結果表示(id, message) { document.getElementById(id).textContent = message; }
function 回答() {
結果表示('アラートっぽい枠', '次の問題にいきましょう！');
結果表示('告知っぽい枠', '1回ミスで問題数は2');
}
</script>
<style>
#アラートっぽい枠 { font-size:150%; text-align:center; border:thick solid red; border-radius:1em; }
#告知っぽい枠 { font-size:100%; text-align:center; border:thick solid darkred; border-radius:1ex; }
</style>

<p id="アラートっぽい枠"></p>
<p id="告知っぽい枠"></p>

<button onclick="回答()">回答する</button>

この回答へのお礼

ありがとうございます。なんとか試行錯誤して試してみました。
<script＞の部分だけを、index.jsの中に写して
それ以外をindex.htmlに記載させました。
少し改造して、なんとか無事動きそうです。
とてもおもしろいです！　ますますはまりそうです。また
分からないことがあれば是非教えていただきたいです。

お礼日時：2015/07/21 22:05

No.1 回答者： Ogre7077 回答日時： 2015/07/21 16:16

案1

<script>
function 結果表示(message) { document.getElementById('アラートっぽい枠').textContent = message; }
</script>
<style>
#アラートっぽい枠 { font-size:150%; text-align:center; border:thick solid red; border-radius:1em; }
</style>
<div id="アラートっぽい枠"></div>

案2
https://www.google.co.jp/search?q=html+floating+ …

この回答へのお礼

さっそくありがとうございます！案１でいきたいのですが、
ちょっとうまくいきませんでした。

alert(tm + "秒でクリア！！次の問題にいきましょう！");
mondaisuu =mondaisuu +1
if (miss>0) {ruiseki=ruiseki+1}
alert(ruiseki +"回ミス"+"で問題数は"+mondaisuu)

↑メッセージ文字をアラーっとぽい枠の中に出すには、
↓のようにするのでしょうか？
<div id="tm + "秒でクリア！！次の問題にいきましょう！""></div>

お礼日時：2015/07/21 16:47